-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hooks-based renderSuggestions function component causes invariant violation #44
Comments
Can you show how you were trying to implement the component assigned to renderSuggestions? |
@lafiosca thanks a lot for your detailed feedback and substantive issue. @DeniferSantiago for now, you can just put a function which returns <MentionInput
value={value}
onChange={setValue}
partTypes={[
{
trigger: '@',
renderSuggestions: (props) => <YourFunctionalOrClassComponent {...props} />,
textStyle: {fontWeight: 'bold', color: 'blue'},
},
]}
/> |
@dabakovich Thank you. I think that approach sounds very sensible. In the meantime I can continue using my patch. @DeniferSantiago I probably should have given a clearer example of what I was talking about. I think @dabakovich understood, but I will share some more detail here for anyone else curious. Off the top of my head, here's a pseudocode example... const MentionSuggestions = (props: MentionSuggestionsProps): JSX.Element | null => {
const users = useSelector(selectUsers); // <-- here's a hook call
/* ... */
return stuff;
}
/* ... */
<MentionInput
value={value}
onChange={setValue}
partTypes={[
{
trigger: '@',
renderSuggestions: MentionSuggestions,
textStyle: styles.mentionText,
},
]}
/> Because of the way the |
I just saw your PR and understood, thanks for detailing it. It seems to me that the idea of implementing it in another version is a good idea. |
Hi all! V3 release is almost ready, and you can play with external suggestions rendering using |
Hello! Thank you for building such a useful library and for doing it with TypeScript :)
I am starting to use this library in my app for the first time, and I ran into a minor snag. I created a standalone
MentionSuggestions
function component to use in thepartTypes
prop of myMentionInput
, but I ran into an invariant violation. Based on the usage example in the README, I expected any function component to work asrenderSuggestions
, but it turns out that is not the case. MyMentionSuggestions
component uses hooks, but because of the way the library currently renders the suggestions, the app runs into problems with conditional hook evaluations:react-native-controlled-mentions/src/components/mention-input.tsx
Lines 118 to 125 in 8b286da
Now, I realize I could wrap the component in another anonymous function, like you do in this example: #17 (comment)
But that feels a bit redundant to me, and I'd prefer not to have to do that everywhere that I use the component. I created my own local patch of the library to allow me to use the component directly by rendering it as a React element. I will share a pull request for that change in case you are interested in incorporating it. I will understand if you do not want to incorporate this, as it is potentially a breaking change for people who are returning less typical
ReactNode
values from theirrenderSuggestions
functions.The text was updated successfully, but these errors were encountered: