Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-use-inputs

mleralec7MIT1.1.0TypeScript support: included

Set of hooks to manage your inputs.

react, hooks, use, inputs, form

readme

React use inputs

Set of hooks to manage your inputs.

Install

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

Usage

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

changelog

Change Log

1.1.0 (2020-04-20)

  • Add some tests
  • Update README.md
  • Add licence file

1.0.3 (2020-02-24)

  • Fixed search inputs in every children of RadioGroup (recursive)

1.0.2 (2020-02-23)

  • Fixed onChange prop can receive string on useRadio/useSelect/useTextInput

1.0.1 (2020-02-23)

  • Fixed RadioGroup export on index.d.ts

1.0.0 (2020-02-23)

  • Initial public release