Module

Overview

A Module is a React Function Component that returns a <Module> instance.

Quick Look

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

const Button = (props) => <Module name='button' {...props}>{props.children}</Module>

export default Button;

import React from 'react';
import { Module } from '@onenexus/lucid';
import { Logo, Navigation } from 'modules';

const Header = (props) => (
  <Module name='header' {...props}>
    <Logo />
    <Navigation />
  </Module>
);

export default Header;

Props

Prop	Type	Description
[name]	String	The name of the Module to be used when rendering to the DOM (if not passed a unique name in the format module-1 will be used)
[styles]	(Object|Function|Array)	Your Module's styles
[config]	(Object|Function)	Your Module's configuration
[theme]	(Object|Function)	Your project's/UI's theme
[content]	React Element	The content to render within the Module (instead of passing a child/children elements)
[tag='div']	(String|React Element)	HTML tag or React Component to use when rendering the Module
[component]	React Element	You can supply a React Component to render instead a div/HTML tag
[id]	String	Standard id HTML attribute (learn more)
[className]	String	CSS classes to add to the rendered Component
[href]	String	Standard href attribute for anchor tags - adding this prop will automatically set tag to a
[data-{attribute}]	String	Any data-attribute
[on{Event}]	Function	Any valid GlobalEventHandler (you must use camelCase to be compatible with React)
[attributes]	Object	If you need to send any other attributes to the rendered DOM node, you can pass them here
[generateClasses=true]	Boolean	If you wish for Lucid to not output any CSS class names to the DOM, disable this option (can be set globally)
[singleClass=false]	Boolean	If you wish for Lucid to generate separate classes for each modifier, enable this option (can be set globally)
[componentGlue='__']	String	The glue to connect Component names to other Components/the parent Module in the generated CSS class names (can be set globally)
[modifierGlue='--']	String	The glue to connect modifiers to Modules/components in the generated CSS class names (can be set globally)

Using content Prop

You can use the content prop instead of passing a child/children elements

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

const Button = (props) => <Module name='button' content={props.children} {...props} />

export default Button;

Render Function

By supplying a function to render within <Module>, you can access the following properties from within your Module's JSX:

• Theme
• Config
• Context
• Utils

const MyModule = (props) => (
  <Module styles={styles} {...props}>
    {({ theme, config, context, utils }) => {
      ...

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