# react-use-inputs

> Set of hooks to manage your inputs.

Latest version **1.1.0** (published 2020-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-inputs
pnpm add react-use-inputs
yarn add react-use-inputs
bun add react-use-inputs
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-04-20 |
| First published | 2020-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mleralec |
| Maintainers | mleralec |
| Keywords | react, hooks, use, inputs, form |

## Links

- npm: https://www.npmjs.com/package/react-use-inputs
- Repository: https://github.com/mleralec/react-use-inputs
- Homepage: https://github.com/mleralec/react-use-inputs#readme
- Issues: https://github.com/mleralec/react-use-inputs/issues
- npm.io page: https://npm.io/package/react-use-inputs

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-04-20
- 1.0.3 — 2020-02-24
- 1.0.2 — 2020-02-23
- 1.0.1 — 2020-02-23
- 1.0.0 — 2020-02-23

## README

# [React use inputs](https://www.npmjs.com/package/react-use-inputs)

Set of hooks to manage your inputs.

## Install

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

---

## Usage

- [useCheckbox](#useCheckbox)
- [useRadio](#useRadio)
- [useSelect](#useSelect)
- [useTextInput](#useTextInput)

### useCheckbox

#### Simple example

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

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

#### Access value

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

#### Trigger manually

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

#### Options

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

---

### useRadio

#### Simple example

```jsx
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

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

#### Trigger manually

```jsx
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

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

---

### useSelect

#### Simple example

```jsx
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

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

#### Trigger manually

```jsx
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

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

```

---

### useTextInput

#### Simple example

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

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

#### Access value

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

#### Trigger manually

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

#### Options

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

## Licence

MIT

---
_Source: https://npm.io/package/react-use-inputs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._