Passing context down to custom components

[santialbo]

What's the recommended way of passing some data to custom components.

Let's say I want to change the component NoOptionsMessage for example and show something that depends on the user of my app.

What's the best way of passing this user so my custom NoOptionsMessage can read it?

I can think of several options:

1. Defining my custom component "on the fly".

function MyApp() {
  const user = ...;
  return (
    <Select components={{
      NoOptionsMessage: () => {
        return user ? <>...</> : <>...</>;
      }
    }}/>
  );
}

2. Using a context

const MyContext = React.createContext(null);

function NoOptionsMessage() {
  const user = useContext(MyContext);
  return user ? <>...</> : <>...</>;
}

function MyApp() {
  const user = ...;
  return (
    <Context.Provider value={user}>
      <Select components={{ NoOptionsMessage }}/>
    </Context.Provider>
  );
}

3. (Totally made up) Maybe passing it somehow to the Select component so it is passed down to the custom components:

function NoOptionsMessage({context: {user}}) {
  return user ? <>...</> : <>...</>;
}

function MyApp() {
  const user = ...;
  return (
    <Select components={{ NoOptionsMessage }} context={{user}}/>
  );
}

Out of all of them I like number 3 the most, but I'm not sure it's currently possible. Number 2 feels the most correct but it's very verbose, and number 1 doesn't feel quite right. What do you think?

[Rall3n]

Hello @santialbo,

I would definitely advise against option number 1, because creating components on-the-fly is discouraged as it can lead to unwanted side effects.

Option number 2 would be the recommended way to handle this when using custom components.

Option number 3 is possible, but you could have problems with types inside a TypeScript environment. Also the prop would be available under props.selectProps.context.

---

There exists another option which does not need a custom component: the noOptionsMessage prop.

const user = ...;

const noOptionsMessage = useCallback(({ inputValue }) => `message for ${user}`, [user]);

<Select
  noOptionsMessage={noOptionsMessage}
/>