React use inputs

Set of hooks to manage your inputs.

Install

yarn add react-use-inputs
# or
npm i react-use-inputs

Usage

• useCheckbox
• useRadio
• useSelect
• useTextInput

useCheckbox

Simple example

import { useCheckbox } from 'react-use-inputs'

() => {
  const checkbox = useCheckbox({ state: true });
  return <input {...checkbox}>;
}

Access value

const checkbox = useCheckbox({ state: true });
const value = checkbox.checked;

Trigger manually

const checkbox = useCheckbox({ state: true });
return (
  <>
    <input {...checkbox}>
    <button type="button" onClick={checkbox.onChange}>Trigger</button>
  </>
);

Options

useCheckbox({
  state: boolean;
  disabled?: boolean = false;
  id?: string;
  name?: string;
})

useRadio

Simple example

import { useRadio, RadioGroup } from "react-use-inputs";

() => {
  const radio = useRadio({ state: "B", name: "test" });
  return (
    <RadioGroup {...radio}>
      <label htmlFor="A">A</label>
      <input value="A" id="A" />

      <label htmlFor="B">B</label>
      <input value="B" id="B" />
    </RadioGroup>
  );
};

Access value

const radio = useRadio({ state: "B", name: "test" });
const value = radio.value;

Trigger manually

const radio = useRadio({ state: "B", name: "test" });
return (
  <>
    <RadioGroup {...radio}>
      <label htmlFor="A">A</label>
      <input value="A" id="A" />

      <label htmlFor="B">B</label>
      <input value="B" id="B" />
    </RadioGroup>
    <button type="button" onClick={() => radio.onChange("B")}>
      Reset value to "B"
    </button>
  </>
);

Options

useRadio({
  state: string;
  name: string;
})

useSelect

Simple example

import { useSelect } from "react-use-inputs";

() => {
  const select = useSelect({ state: "A" });
  return (
    <select {...select}>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  );
};

Access value

const select = useSelect({ state: "A" });
const value = select.value;

Trigger manually

const select = useSelect({ state: "A" });
return (
  <>
    <select {...select}>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <button type="button" onClick={() => select.onChange("B")}>
      Reset value to "B"
    </button>
  </>
);

Options

useSelect({
  state: string;
  id?: string;
  name?: string;
  disabled?: boolean = false;
})

useTextInput

Simple example

import { useTextInput } from "react-use-inputs";

() => {
  const textInput = useTextInput({ state: "" });
  return <input {...textInput} />;
};

Access value

const textInput = useTextInput({ state: "" });
const value = textInput.value;

Trigger manually

const textInput = useTextInput({ state: "" });
return (
  <>
    <input {...textInput} />
    <button type="button" onClick={() => textInput.onChange("")}>
      Reset
    </button>
  </>
);

Options

useTextInput({
  state: string;
  type?: string = 'text';
  disabled?: boolean = false;
  id?: string;
  name?: string;
  placeholder?: string;
})

Licence

MIT