Component

Overview

Components are an extension of Modules

A Component forms up with other Components (typically) to form a Module.

Quick Look

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

export default (props) => (
  <Module name='deck' {...props}>
    <Component name='card'>
      <Component name='heading'>Heading 1</Component>
      <Component name='content'>Content 1</Component>
    </Component>
    <Component name='card'>
      <Component name='heading'>Heading 2</Component>
      <Component name='content'>Content 2</Component>
    </Component>
  </Module>
);

Props

Please see the <Module> page for available inherited props

Prop	Type	Description
name	String	The name of the Component - this is required to map styles from the context
[module]	String	The name of the Module to use when rendering the Component
[subComponent]	Boolean	Determine whether the rendered element should be treated as a SubComponent

Props.module

If this value is not passed, the Module name will be retrieved from the parent <Module>'s context (if it exists). This allows you to either overwrite the context's Module name, or use the <Component> Component without a parent <Module>.

// this won't work as there is no known Module name
<Component name='foo'>Foo</Component>

// this will work as it will retrieve `fizz` from the context
<Module name='fizz'>
    <Component name='foo'>Foo</Component>
</Module>

// this will also work as we are explicitly passing a `module` value
<Component name='foo' module='fizz'>Foo</Component>

Props.subComponent

Learn more about SubComponents

<Module name='header'>
    <Component name='navigation'>
        <Component subComponent={true} name='item'>Nav Item</Component>
    </Component>
</Module>

The above is identical to:

<Module name='header'>
    <Component name='navigation'>
        <SubComponent name='item'>Nav Item</SubComponent>
    </Component>
</Module>