react-xtz-components

A lightweight and reusable React component library that provides:

• Customizable Checkbox component
• Customizable Dropdown component

Designed for simplicity, flexibility, and easy integration in your React projects.

Table of Contents

• Installation

• Usage

• Props

  • Checkbox Props
  • Dropdown Props

• Examples

• License

Installation

Install via npm:

npm install react-xtz-components

Or for local development:

npm link react-xtz-components

Usage

Import components from the package:

import React, { useState } from "react";
import { Checkbox, RadioButton } from "react-xtz-components";

function App() {
  // State for checked checkboxes
  const [checkedItems, setCheckedItems] = useState([]);

  // State for selected radio
  const [selectedRadio, setSelectedRadio] = useState(null);

  const checkboxOptions = [
    { id: "cb1", label: "Accept terms", color: "green" },
    { id: "cb2", label: "Subscribe newsletter", color: "blue" },
  ];

  const radioOptions = [
    { id: "rb1", label: "Option 1", value: "option1", color: "red" },
    { id: "rb2", label: "Option 2", value: "option2", color: "orange" },
    { id: "rb3", label: "Option 3", value: "option3", color: "purple" },
  ];

  const handleCheckboxChange = (label, isChecked) => {
    setCheckedItems((prev) => {
      if (isChecked) return [...prev, label];
      return prev.filter((item) => item !== label);
    });
  };

  const handleRadioChange = (label, value) => {
    setSelectedRadio(label);
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h2>Checkboxes</h2>
      {checkboxOptions.map((cb) => (
        <Checkbox
          key={cb.id}
          id={cb.id}
          label={cb.label}
          color={cb.color}
          onChange={(e) => handleCheckboxChange(cb.label, e.target.checked)}
        />
      ))}
      <p>Checked: {checkedItems.join(", ") || "None"}</p>

      <hr style={{ margin: "20px 0" }} />

      <h2>Radio Buttons</h2>
      {radioOptions.map((rb) => (
        <RadioButton
          key={rb.id}
          id={rb.id}
          name="group1"
          value={rb.value}
          selectedValue={selectedRadio === rb.label ? rb.value : null}
          onChange={() => handleRadioChange(rb.label, rb.value)}
          label={rb.label}
          color={rb.color}
        />
      ))}
      <p>Selected radio: {selectedRadio || "None"}</p>
    </div>
  );
}

export default App;

Props

Checkbox Props

| Prop | Type | Default | Description | | ---------- | -------- | --------- | ------------------------------------------- | | id | string | required | Unique ID for the checkbox | | label | string | "" | Label displayed next to the checkbox | | checked | boolean | false | Controlled checked state | | color | string | #007bff | Color of the checkbox when checked | | onChange | function | optional | Callback called when checkbox state changes |

Dropdown Props

| Prop | Type | Default | Description | | ---------- | -------- | -------- | ----------------------------------------------- | | id | string | required | Unique ID for the dropdown | | options | array | [] | Array of { value, label } objects | | value | string | "" | Controlled selected value | | onChange | function | optional | Callback called when dropdown selection changes |

Examples

See Usage section for full example.

License

MIT License