Rendering a Component

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

Example

ExampleSelect.js


import React from "react";
import CustomizableSelect from "@padillaco/customizable-select";
 
const options = [
  {
    label: "United States",
    value: "united-states",
    html: "United States"
  },
  {
    label: "United Kingdom",
    value: "united-kingdom",
    html: "United Kingdom"
  }
];
 
export default function ExampleSelect() {
  return <CustomizableSelect options={options} placeholder="Select a country"/>
}

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

index.mjs


import React from "react";
import ReactDOM from "react-dom/client";
import ExampleSelect from "./ExampleSelect";
 
// Theme config and functional styles
import "@padillaco/customizable-select/scss/theme.scss";
import "@padillaco/customizable-select/scss/select.scss";
 
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
 
root.render(<ExampleSelect/>);

index.html


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Customizable Select Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.mjs"></script>
  </body>
</html>