Using JS Components with Metal.js

Clay Components are made according to Lexicon standards and built on top of the Metal.js framework. This means that you can use Clay Components in your JSX and SOY templates.

Jsx

You can import your components as described in Importing the JS Component. Consider the example below:

import {ClayBadge} from 'clay';

You can call Clay components in your JSX templates just like you would call Metal.js components:

import Component from 'metal-jsx';
import {ClayBadge} from 'clay';

class App extends Component {
    render() {
        return(
            <div>
                <h4>My Application with Clay<h4>
                <hr />
                <ClayBadge
                    id="myId"
                    label="badge"
                    style="danger"
                />
            </div>
        );
    }
};

Soy

You can call Clay components in your SOY templates the same way you would call any SOY component. Consider the example below:

Warning: Make sure you import the Clay component where you want to use it.

import Component from 'metal-component';
import Soy from 'metal-soy';

import {ClayBadge} from 'clay';

class App extends Component {}

// more...

{namespace App}

{template .render}
    {call ClayBadge.render}
        {param id: 'myId' /}
        {param label: 'badge' /}
        {param style: 'danger' /}
    {/call}
{/template}