Provider

The Provider Component is used to pass data to your Modules through React's Context. Lucid uses the Provider for themes and utils.

<Provider theme={theme} utils={utils}>
  {children}
</Provider>

In your Module's styles:

const styles = ({ theme, utils }) => ({
  ...
});

In your Module's JSX using a Render Function:

const MyModule = (props) => (
  <Module styles={styles} {...props}>
    {({ theme, utils }) => {
      // some logic using `theme`/'utils'...

      return props.children;
    }}
  </Module>
);

...or alternatively using Hooks:

import { useConfig, useTheme, useUtils } from '@onenexus/lucid';

const MyModule = (props) => {
  const theme = useTheme();
  const utils = useUtils();

  // some logic using `theme`/'utils'...

  return (
    <Module styles={styles} {...props}>
      {props.children}
    </Module>
  );
}