Rendering a Component

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

Structure

The structure of a basic select component:

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

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();