Component

Components are an extension of Modules

A component forms up with other components (typically) to form a Module.

• Props

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>