Component

A component (in the Synergy context, not to be confused with React components) 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
[modifiers]	Array	Modifiers to add to the rendered component
[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
[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.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>