react-two-way-binding-hook

react-two-way-binding-hook is a custom React hook that enables two-way data binding for form inputs. This hook simplifies state management for input elements, allowing you to easily synchronize the value of an input field with the component state.

Features

• Two-way data binding for text inputs and checkboxes.
• Simplified state management using a single hook.
• TypeScript support for better development experience and type safety.

Installation

You can install react-two-way-binding-hook via npm or yarn.

Using npm:

npm install react-two-way-binding-hook
Using yarn:
yarn add react-two-way-binding-hook

Usage

Here's a basic example of how to use the useBinding hook in your React

import React from 'react';
import { useBinding } from 'react-two-way-binding-hook';

function App() {
  const text = useBinding('');
  const checkbox = useBinding(false);

  return (
    <div>
      <input type="text" {...text} placeholder="Type here..." />
      <input type="checkbox" {...checkbox} />
      <p>Text: {text.value}</p>
      <p>Checkbox: {checkbox.value ? "Checked" : "Unchecked"}</p>
    </div>
  );
}

export default App;