0.0.1 • Published 11 months ago

@droid-tech/react-ts-checkbox v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

AppCheckbox

AppCheckbox is a customizable React checkbox component built with TypeScript. It provides a simple way to add checkbox functionality to your React applications with a clean, modern design.

Features

  • Customizable label
  • Controlled checkbox state
  • TypeScript support for type safety
  • Passes through additional props to the underlying input element

Installation

To use the AppCheckbox component in your React application, install it via npm:

npm install @droid-tech/react-ts-checkbox

Usage

To use the AppCheckbox component, import it and provide the required props:

import AppCheckbox from "@droid-tech/react-ts-checkbox";

const MyComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <AppCheckbox
      label="Accept terms and conditions"
      checked={isChecked}
      onChange={handleChange}
    />
  );
};

Props

The AppCheckbox component accepts the following props:

PropTypeRequiredDescription
labelstringYesThe text label for the checkbox
checkedbooleanYesThe current checked state of the checkbox
onChange(checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => voidYesFunction to call when the checkbox state changes

Any additional props will be passed through to the underlying input element.

Customization

The AppCheckbox component uses styled-components, which allows for easy customization and theming. You can override the default styles by wrapping the AppCheckbox component with a styled-components theme provider or by creating new styled components based on the existing ones.

Accessibility

The AppCheckbox component is built with accessibility in mind. It uses a proper label element associated with the checkbox input, ensuring that screen readers can properly interpret the component.

Conclusion

The AppCheckbox component provides a simple and customizable way to add checkbox functionality to your React application. With its TypeScript support and styled-components integration, it can easily be styled to match your design requirements while maintaining type safety.

0.0.1

11 months ago