Config

Lucid provides an API for easily providing a Module's configuration to the corresponding Module's styles (which is useful if the Module's styles and config exist in separate files, or if you use themes):

config.js

export default {
  someProperty: true
}

styles.js

export default ({ config }) => ({
  color: config.someProperty ? 'red' : 'blue'
});

index.js

import styles from './styles.js';
import config from './config.js';

const MyModule = () => (
  <Module styles={styles} config={config}>
    ...
  </Module>
);

Exposing the Theme to Module's Config

If your project uses themes, you can expose the theme to your Module's configuration by exporting a function that accepts a theme parameter:

config.js

export default (theme) => ({
  someProperty: theme.someThemeProperty
});

Accessing Evaluated Config Within a Module's JSX

When using themes, you can provide additional (or custom) configuration to your Modules at run-time. Your Module's configuration can also exist as a function instead of an object. This means that the final evaluated config for a given Module (the config exposed to your styles) is likely to be different from the config reference you import and pass to the config prop (but doesn't have to be).

In some cases, you may wish to access your Module's final evaluated configuration within the Module's JSX in addition to accessing it within the Module's styles.

Normal (No Config Access)

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

import styles from './styles';
import config from './config';

const myModule = (props) => (
  <Module styles={styles} config={config} {...props}>
    {props.children}
  </Module>
);

Using Render Function (Config Access)

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

import styles from './styles';
import config from './config';

const myModule = (props) => (
  <Module styles={styles} config={config} {...props}>
    {({ config }) => {

      // some logic using `config`...

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

Note that using a render function with <Module> also exposes the Module's context object and theme object

Using Hooks (Config Access)

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

import styles from './styles';
import config from './config';

const myModule = (props) => {
  const theme = useTheme();
  const evaluatedConfig = useConfig(config, theme);

  // some logic using `evaluatedConfig`...

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

Retreiving Cosmetic Styles From Config

As configuration can often map directly to CSS properties (e.g color, fontSize, fontFamily etc...), it's possible for you to pass your Module's configuration object (if it has one) to a styles array:

Learn more about this convention

const config = {
  fontSize: '12px',
  someNoneCSSProp: true,
  color: 'purple',
  myComponent: {
    color: 'green',
    anotherGeneralProp: false
  }
}

const styles = ({ config }) => {
  // some non-cosmetic/configurable style properties
  const layout = {
    position: 'relative',

    myComponent: {
      display: 'flex'
    }
  }
  
  // return an array passing the config as one of the values,
  // so that styles can be retreived and parsed from it
  return [config, layout];
}

const MyModule = () => (
  <Module styles={styles} config={config}>
    <Component name='myComponent'>
      ...
    </Component>
    <Component name='myComponent'>
      ...
    </Component>
  </Module>
);

All Objects returned by styles (i.e [config, layout]) will be parsed as Cell Query, allowing you to style the Module and its Components as plain Objects (including JSON)