CheckBox

CheckBox

Overview

The CheckBox component is a custom React component for rendering checkboxes with an enhanced user experience, including audio feedback on interactions. It's designed to be easily integrated into forms or other interactive elements where a checkbox input is required.

Installation

To use the CheckBox component, import it into your React project:

const { CheckBox } = window.$_gooee.framework;

Usage

The CheckBox component is used to display a checkbox that can be toggled on or off. It supports custom styling and provides an audio feedback feature for interactions like hover and click.

Props

The CheckBox component accepts the following props:

• className: Additional CSS class names to apply to the checkbox.
• style: CSS styles to apply to the checkbox.
• checked: Boolean indicating whether the checkbox is checked.
• onToggle: Function to be called when the checkbox is toggled. It receives the new checked state as an argument.

Functionalities

• State Management: Manages its checked state internally and syncs with the checked prop.
• Custom Styling: Can be styled via CSS classes and inline styles.
• Audio Feedback: Provides audio feedback for interactions using the engine.trigger method.

Interaction

• The checkbox toggles its state upon clicking.
• Audio feedback is played on hover and click events.
• The checked state is propagated back to the parent component via the onToggle callback.

Styling

The component uses the following CSS classes:

• form-check-input: The base class for the checkbox.
• checked: Applied when the checkbox is checked.
• Additional classes can be applied via the className prop.

Examples

Basic Checkbox

<CheckBox checked={true} onToggle={(newChecked) => console.log(newChecked)} />

Custom Styled Checkbox

<CheckBox className="custom-class" style={{ color: 'blue' }} checked={false} onToggle={(newChecked) => console.log(newChecked)} />

Contributing

Contributions to improve the CheckBox component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.