Reactstrap Choices Js

import React from "react";
// JavaScript library for creating Dropdown Selects
import Choices from "choices.js";
// reactstrap components
import { Input } from "reactstrap";

// Core Components

function Example() {
  React.useEffect(() => {
    new Choices("#choices-single-default", {
      searchEnabled: false,
    });
  }, []);
  return (
    <>
      <Input
        data-trigger=""
        id="choices-single-default"
        name="choices-single-default"
        type="select"
      >
        <option placeholder="true">Single Option</option>
        <option defaultValue="2">Foobar</option>
        <option defaultValue="3">Is great</option>
        <option defaultValue="4">Pick one</option>
      </Input>
    </>
  );
}

export default Example;

import React from "react";
// JavaScript library for creating Dropdown Selects
import Choices from "choices.js";
// reactstrap components
import { Input } from "reactstrap";

// Core Components

function Example() {
  React.useEffect(() => {
    new Choices("#choices-multiple-default", {
      searchEnabled: true,
      delimiter: ",",
      editItems: true,
      removeItemButton: true,
    });
  }, []);
  return (
    <>
      <Input
        data-trigger=""
        id="choices-multiple-default"
        multiple="multiple"
        name="choices-multiple-default"
        type="select"
      >
        <option placeholder="true">Multiple Options</option>
        <option defaultValue="2">Paris</option>
        <option defaultValue="3">Bucharest</option>
        <option defaultValue="4">Rome</option>
        <option defaultValue="5">New York</option>
        <option defaultValue="6">Miami</option>
        <option defaultValue="7">Los Santos</option>
        <option defaultValue="8">Sydney</option>
        <option defaultValue="9">Piatra Neamt</option>
      </Input>
    </>
  );
}

export default Example;

import React from "react";
// JavaScript library for creating Tags Inputs
import Choices from "choices.js";
// reactstrap components
import { FormGroup } from "reactstrap";

// Core Components

function Example() {
  React.useEffect(() => {
    new Choices("#badges", {
      delimiter: ",",
      editItems: true,
      maxItemCount: 5,
      removeItemButton: true,
      placeholder: true,
      placeholderValue: "+ Add",
    });
  }, []);
  return (
    <>
      <FormGroup>
        <input
          defaultValue="Amsterdam,Sydney, Rome, Singapore"
          id="badges"
          type="text"
        ></input>
      </FormGroup>
    </>
  );
}

export default Example;