Component

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

• Props
• Example

Props

Prop	Type	Description
name	String	The name of the component
[tag='div']	(String|React Element)	HTML tag or React Component to use when rendering the module
[className]	String	CSS classes to add to the rendered component
[on{Event}]	Function	Any valid GlobalEventHandler (you must use camelCase to be compatible with React)
[{HTML Attribute}]	String	Any valid HTML attribute
[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
[componentProps]	Object	Props to pass to the component that is rendered by <Module> (i.e Props.tag)

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

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

Output

<header class="header">
    <div class="header_navigation">
        <div class="header_navigation_item">Nav Item</div>
    </div>
</header>

Props.componentProps

For performance reasons, <Component> only accepts the Props defined above. If you need to pass additional props to the component rendered by <Component> (e.g. if you pass another React component for Props.tag and need to pass some props to that component), you can pass them via this property.

<Component name='foo' tag={SomeComponent} componentProps={somePropsObject}>
    ...
</Component>

Above, the keys in somePropsObject will be used as props for SomeComponent.

Example

<Module name='accordion'>
  <Component name="panel">
    <Component name="title">foo</Component>
    <Component name="content">bar</Component>
  </Component>
  <Component name="panel">
    <Component name="title">fizz</Component>
    <Component name="content">buzz</Component>
  </Component>
</Module>

Output

<div class="accordion">
  <div class="accordion_panel">
    <div class="accordion_title">foo</div>
    <div class="accordion_content">bar</div>
  </div>
  <div class="accordion_panel">
    <div class="accordion_title">fizz</div>
    <div class="accordion_content">buzz</div>
  </div>
</div>