/nestedCheckbox

Custom Nested Recursive React Component

Primary LanguageJavaScript

Netlify Status

Nested Checkbox Component

Nested Checkbox

  • Component should act like a traditional form input element
<!-- Using HTML Labels with htmlFor for targeting inputs from text -->
<!-- Using Native Checkbox HTML Tag without adding additional complexity to Code  -->
<!-- Managed Custom Checbox Design Using ::before psuedo elements with minimum dependency code  -->
  • Lightweight with no addtional Dependency
 "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },

  • Each node can be nested to N levels

  • emits necessary events

     // Firing Custom Event on Change
    const customChangeEvent = new Event('customChange');
    e.target.dispatchEvent(customChangeEvent);
  • Checkbox with intermediate state
input[data-intermediate="true"]::before {
  box-shadow: inset 1em 1em #ff9901;
}
  • Can be Memoized for rendering optimization in future