Any plans to use contexts for theming/styles/components etc?

[EloB]

I know it's possible to make wrapper components but then you often lose "types" (I've seen that you documented it on how to do it properly but for instance I've missed it initially). Another benefit of using React contexts is a way to control different styles on different sections on your website. Maybe you have a dark area on your site that you want all Select boxes to have a specific color.

Everything doesn't need to go into the context but styles, theme and components would be nice to be able to control on a global/contextual level.

It's pretty common practice for styling and customization nowadays.

import { createContext } from "react";

// Export this from the library so it can be used by others like this:
// import { ReactSelectContext } from "react-select";
export const ReactSelectContext = createContext<{
  styles: StylesConfig<any, any, any>;
  theme: ThemeConfig;
  components: SelectComponents<any, any, any>;
  // Maybe other properties too that otherwise being passed through the React tree.
}>({
  // Put all the default React select styles, theme and components here instead.
});

// Then use the ReactSelectContext in library and document for the users to use this approach instead.
import { useContext } from "react";

// Inside react components
useContext(ReactSelectContext);

This might also simplify props for Replacement components. You no longer need to pass as much properties to them. You can instead grab them from the context if they have dependency to it.

const MenuList = (props) => {
  const ctx = useContext(ReactSelectContext);

  // Do something with the context
  
  return <components.MenuList {...props} />
};