Rendering a Component

Below is an example setup to render a simple select component using a <select> element. More examples can be found here , where you can edit different versions of the select component in a sanbox environment on Codespaces .

Structure

Example 1: Basic Select


<select class="cs-init" data-placeholder="Select an option" data-clearable="true">
  <option value="option-1" selected>Option 1</option>
  <option value="option-2">Option 2</option>
</select>

Example 2: Using HTML in OPTION elements

In order to show HTML for options in the custom select component, when using a <select> element to initialize the component, be sure to encode the HTML inside <option> elements. Example:


<select class="cs-init" data-placeholder="Select an option" data-clearable="true">
  <option value="option-1" selected>
    &lt;span&gt;Option 1&lt;/span&gt;
  </option>
  <option value="option-2">
    &lt;span&gt;Option 2&lt;/span&gt;
  </option>
</select>

Option label vs html

An option’s label shows within the select handle when the option is selected
An option’s inner HTML is shown within the select dropdown

Initialization & Styles

The CustomizableSelectInit function returns an instance of the Initializer class that looks for HTML elements that match the given selectors, extracts data from attributes and text content, then renders a CustomizableSelect React component. The watch method watches for new HTML elements added to the DOM later, then renders a component for those as well.

Below is an example initialization implementation:


import { CustomizableSelectInit } from "@padillaco/customizable-select";
 
// Theme config and functional styles
import "@padillaco/customizable-select/scss/theme.scss";
import "@padillaco/customizable-select/scss/select.scss";
 
// The ".cs-init" class is used here as an example, but, you can use any
// selector you wish to initialize the select component.
CustomizableSelectInit(".cs-init").watch();