React Component

The WireBootstrap React Component turns any WireBootstrap component into a React component.

<WireComponent></WireComponent>

The WireBootstrap for React Component has two properties.

component

Set the component property to the fully qualified class or function name of the WireBootstrap component to be rendered in the WireBootstrap React Component.

The following example renders the Select2 for WireBootstrap component as a React component.

<WireComponent component="wire.select2"></WireComponent>

config

Use the config property to set the configuration for the component.

The following sets the configuration for the Select2 for WireBootstrap component using the config property on the WireBootstrap React Component.

const cfg = {
    data: [
        {id: "P1584", text: "Bikes"},
        {id: "P3945", text: "Skates"}
    ]
}

<WireComponent component="wire.select2" config={cfg}></WireComponent>

Rendering the Component

To render the component, put the DOM element used to render the component inside the <WireComponent> element.

The example below turns a normal HTML SELECT element into a Select2 pick list using the WireBootstrap React component with the Select2 for WireBootstrap bindings.

<WireComponent component="wire.select2" config={cfg}>
    <select class="form-control"></select>
</WireComponent>

For additional examples, visit the Sample Project.