Utils

Utils are essentially custom utility functions, and the utils object is a way for you to store them. Lucid provides an implicit way to handle passing/exposing custom utility functions to your Modules.

Pass using Provider Component:

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

Accessing from within Module's styles:

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

Accessing from within Module's JSX:

Using Render Function

import { Module } from '@onenexus/lucid';

const MyModule = (props) => (
  <Module styles={styles} {...props}>
    {({ utils }) => {
      // some logic with `utils`

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

Using useUtils Hook

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

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

  // some logic with `utils`

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

Importing Manually

As your Utils will most likely be static, you can probably just import them manually without providing them to Lucid via <Provider>:

import { Module } from '@onenexus/lucid';
import utils from './utils';

const MyModule = (props) => {
  // some logic with `utils`

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