Usage

Once installed, you can use the NestedCheckbox component in your React application.

import React from 'react';
import { NestedCheckbox } from 'nested-checkbox';
 
const App = () => {
  const nestedList = [
    {
      title: 'Category 1',
      value: 'category1',
      isChecked: false,
      show: false,
      child: [
        {
          title: 'Item 1.1',
          value: 'item1.1',
          isChecked: false,
          show: false,
          child: [],
        },
        {
          title: 'Item 1.2',
          value: 'item1.2',
          isChecked: false,
          show: false,
          child: [],
        },
      ],
    },
    // Add more categories and items as needed
  ];
 
  return (
    <div>
      <h1>Nested Checkbox Example</h1>
      <NestedCheckbox list={nestedList} label="Nested Checkbox" placeholder="Search..." />
    </div>
  );
};
 
export default App;
 

Props

The NestedCheckbox component accepts the following props:

• list: An array of objects representing the hierarchical structure of the checkbox list.
• label: (Optional) The label for the nested checkbox component.
• placeholder: (Optional) The placeholder text for the search input.
• selectedListValues: (Optional) A function that receives an array of selected item values.
• selectedList: (Optional) A function that receives an array of selected items.
• required: (Optional) A boolean indicating whether the component is required.
• dir: (Optional) The text direction of the component, either 'ltr' or 'rtl'.
• showModal: (Optional) A boolean indicating whether to show a modal for displaying selected items.
• showCount: (Optional) A boolean indicating whether to display the count of selected items.
• emptyMessage: (Optional) The message to display when there are no items to select.
• searchInputProps: (Optional) Additional props to pass to the search input element.

Component

Nested Checkbox Example:

Nested Checkbox label

Category 1

Item 1.1

Item 1.2