Oasis-Path/React-Select

A React Select that follow the same way as HTML by rendering children instead of handling data sent by the user. The user will need to build the logic and send the Select children to render.

Basic Usage

const [options, setOptions] = useState([
  {
    value: "Option 1",
    id: "1",
    selected: false,
  },
  {
    value: "Option 2",
    id: "2",
    selected: false,
  },
  {
    value: "Option 3",
    id: "3",
    selected: false,
  },
  {
    value: "Option 4",
    id: "4",
    selected: false,
  },
]);

function optionSelected(option: any) {
  const index = options.findIndex((o) => o.id === option.id);
  const newOptions = [...options];
  newOptions[index].selected = !newOptions[index].selected;
  setOptions(newOptions);
}

const tags = (
  <div style={{ display: "flex" }}>
    {options
      .filter((option) => option.selected)
      .map((option) => (
        <span style={{ color: "black" }} key={option.id}>
          {option.value}
        </span>
      ))}
  </div>
);

return (
  <Select tags={tags} placeholder="This is a placeholder">
    {options.map((option) => (
      <SelectOption
        isCheckboxDisplayed={true}
        isSelected={option.selected}
        option={option}
        handleOptionClick={optionSelected}
        key={option.id}>
        {option.value}
      </SelectOption>
    ))}
  </Select>
);