Choice JS

  • Choice.js is important for improving user experience by providing accessible and customizable dropdown menus that are easy to integrate into web forms For more details
    • Installation
    npm i choices.js
    • For use of ChoiceJS we create own custom hook with the help of choices.js
    • The navigation path of this file are ../src/app/components/choices.tsx
    • For the use of ChoiceJS you want appear in your component please follow the below example code
    Script
    import { Fragment, useEffect, memo, createRef } from "react";
import _ from "lodash";

//choices
import Choices from 'choices.js'
// import 'choices.js/public/assets/styles/choices.css'
// import 'choices.js/public/assets/styles/choices.min.css';


//interfaces
interface Props {
  options?: any;
  select?: any;
  name?: string;
  className?: string;
  onChange?: any;
}

const ChoicesJs = memo((props: Props) => {
  const single: any = createRef();
  const isMultiple = props.select === "multi" ? true : false;
  const random: any = () => {
    return Math.floor(Math.random() * 1000) + 1;
  };

  useEffect(() => {
    if (!single.current.classList.contains("choices__input")) {
      if (props.options.length > 0) {
        const obj = {
          removeItemButton: isMultiple,
          allowHTML: true,
          shouldSort: false,
        };
        new Choices(single.current, obj);
      }
    }
  }, [isMultiple, single, props]);
  return (
    <Fragment>
      <select
        ref={single}
        id={random()}
        className={props.className}
        onChange={(e) =>
          _.isFunction(props.onChange) ? props.onChange(e) : e.preventDefault()
        }
        multiple={isMultiple}
      >
        {props.options.map((item: any, index: any) => (
          <option key={index} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
    </Fragment>
  );
});
ChoicesJs.displayName = "ChoicesJs";
export default ChoicesJs;
    • Write below example code in your component to use apexchart

    Example

    const ChoicesJs = dynamic(() => import('@/components/choices'), { ssr: false })
const options = [
  { value: "Past 30 Days", label: "Past 30 Days" },
  { value: "Past 60 Days", label: "Past 60 Days" },
  { value: "Past 90 Days", label: "Past 90 Days" },
  { value: "Past 1 year", label: "Past 1 year" },
  { value: "Past 2 year", label: "Past 2 year" },
];

const Index = () => {
return(
    <div className="form-group mb-0 ">
        <ChoicesJs options={options} className="js-choice" select="one" />
    </div>
)
}
    Previous Next