SolidJSS
SolidJS•3y ago•
5 replies
tozz

Best way of passing props from Provider to Context

So I'm making a simple context with a Provider "wrapper" as is quite common to wrap functionality. I pass some values to it in JSX that should then be available when using the context.

interface DataGridContextValue {
  readonly markets: Record<string, string>;
}

interface DataGridProviderProps {
  children: JSX.Element;
  markets: Record<string, string>;
}

export const DataGridContext = createContext<DataGridContextValue>();

export const DataGridProvider: Component<DataGridProviderProps> = (props) => {
  // Implementation ...

  const values = {
    get markets() {
      return props.markets;
    },
    // ... implementation API.
  };

  return <DataGridContext.Provider value={values}>{props.children}</DataGridContext.Provider>;
};


This works well, but curious as to if there's a smarter way that I'm missing. Solid isn't wrapping reactivity for the value attribute, so I need to do something to keep reactivity.

For usage of the provider it looks like this:
export const DataGrid: Component<DataGridProps> = () => {
  const [markets] = createResource<Record<string, string>>(getMarkets);

  return (
    <DataGridProvider markets={markets()}>
      ...children
    </DataGridProvider>
  );
};
Was this page helpful?