-
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
[Solution] Displaying Mentions Away from TextInput #75
Comments
@swushi @dabakovich I think it is awesome suggetions! |
@swushi Thank you for your great solution. I am having some little difficulties implementing as you suggested above. So could you please share your working implementation in your production. Thank you in advance! |
This is my working provider in our production app, @grooveslap import React, { createContext, useCallback, useState } from 'react';
import { useDebugLog } from 'hooks/debug/useDebugLog';
import { useRenderCounter } from 'hooks/debug/useRenderCounter';
import { SuggestionConfig } from 'hooks/providers/usePartTypeCreator';
const debug = false;
const debugLogs = false && debug;
const debugRenders = false && debug;
interface SuggestionContextConfig {
config?: SuggestionConfig;
setConfig: React.Dispatch<React.SetStateAction<SuggestionConfig | undefined>>;
clearConfig: () => void;
}
export const SuggestionContext = createContext<SuggestionContextConfig>({} as SuggestionContextConfig);
/**
* A provider that should wrap the screen that contains a `MentionInput`
*
* The purpose of this provider is to allow the suggestions component to
* be rendered outside of the input. Currently it is forced to be attached directly to the
* input, which is usually in a inconvenient location.
*
* @example
* const suggestions = useSuggestions()
*
* <SuggestionsProvider>
* <Screen>
* <MentionInput />
*
* // can separate suggestions now, was previously attached to the above component
* {suggestions && renderSuggestions()}
*
* </Screen>
* </SuggestionsProvider>
*/
const SuggestionsProvider: React.FC = ({ children }) => {
useRenderCounter('SuggestionsProvider', debugRenders);
const debugLog = useDebugLog('SuggestionsProvider', debugLogs);
const [config, setConfig] = useState<SuggestionConfig>();
const clearConfig = useCallback(() => {
setConfig(undefined);
}, []);
return (
<SuggestionContext.Provider
value={{
config,
setConfig,
clearConfig
}}
>
{children}
</SuggestionContext.Provider>
);
};
export default SuggestionsProvider; And here is the import { useContext, useEffect, useMemo, useState } from 'react';
import { SuggestionContext } from 'providers/SuggestionsProvider/SuggestionsProvider';
import { maybe } from 'typescript-monads';
export default function useSuggestions() {
const suggestions = useContext(SuggestionContext);
const mentions = useMemo(() => suggestions.config?.['@'], [suggestions.config]);
const topics = useMemo(() => suggestions.config?.['#'], [suggestions.config]);
/**
* calm keyword is needed as react-native-controlled-mentions fires off random undefined values.
* see {@link UsernameSuggestionsMemo}
*/
const [calmKeyword, setCalmKeyword] = useState<string>();
useEffect(() => {
const timeout = setTimeout(() => setCalmKeyword(mentions?.keyword ?? topics?.keyword), 10);
return () => clearTimeout(timeout);
}, [mentions?.keyword, topics?.keyword]);
const isSuggesting = useMemo(() => {
return maybe(calmKeyword).isSome();
}, [calmKeyword]);
return { ...suggestions, mentions, topics, isSuggesting };
} |
@swushi Thank you so much! You're the man! |
@swushi this is great! Can you perhaps share the type definition for |
@aloukissas here is my type for type SupportedSuggestionTrigger = '@' | '#';
type SuggestionConfig = {
[Property in SupportedSuggestionTrigger]?: MentionSuggestionsProps | undefined;
}; This mapped type essentially creates this type: type SuggestionConfig = {
'@'?: MentionSuggestionsProps;
'#'?: MentionSuggestionsProps;
};
I am not familiar with |
Awesome thanks @swushi. I believe it's using react context under the hood. It's really a lightweight implementation of Facebook's Recoil. Very happy with it. |
Add `onMentionsChange` property to the `MentionInput` component. It allows to render suggestions outside `MentionInput` component — #65, #69, #75. Fix double trigger of suggestions render. Now we are trigger this only after selection change — #55. Format `utils.ts` using prettier. BREAKING CHANGES Remove `containerStyle` prop from the `MentionInput` component. Remove `inputRef` prop from the `MentionInput` component. Use traditional `ref` now. Remove `renderSuggestions` and `isBottomMentionSuggestionsRender` from the Part type. Rename `MentionSuggestionsProps` type to `SuggestionsProvidedProps`. Rename `onSuggestionPress` to `onSelect` in the type.
Hi @swushi and other participants! Thank all for your feedbacks and especially for participating all in searching for solution of this issue. Finally, I got a few free days for supporting this package. Your suggestion with using context inspired me to re-think the functionality with rendering suggestions. In fact, we have no need to render it in the So, I'd be glad to say that a new major v3 release is coming, and this issue is one of the main updates 🎉. Now you will be able to use hook for control mention state. The main idea – suggestions rendering now will be fully controlled by user and is extracted from You can find an example of this here: https://github.com/dabakovich/react-native-controlled-mentions/blob/3.0.0-feat-use-mentions/example/mentions-app.tsx#L90 To install this and play by yourself, please use next commands:
I'll be happy to get some feedback from you before the major update will be released. |
@dabakovich these are great news. Gonna try that very soon! |
I'm closing the issue due to the lack of new questions and activity. You are welcome to add comments or create a new issue if you'll get new questions. |
Problem
This library has one key pitfall, it has is the inability to render the suggestions component apart from the
TextInput
. This is the root of some difficult styling challenges. I can see from a number of issues on your repo that this is popular issue. I am writing my solution out as there has not been a great solution I've seen.Solution
Elevate the mention state up to a provider.
This would essentially look like this:
Parent Screen
Suggestions Component
Part Type Creator
You basically need to allow the suggestions provider to take in config for each respective trigger. My implementation for that looks like this:
Usage for that looks like:
SuggestionsProvider Interface
This is how I've exposed the provider for usage throughout the app.
If anyone else decides to go down this rabbit hole, let me know. I have a working implementation in our production app, and would be happy to help.
The text was updated successfully, but these errors were encountered: