# react-word-input

> React functional component for input hinted word

Latest version **1.0.2** (published 2022-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-word-input
pnpm add react-word-input
yarn add react-word-input
bun add react-word-input
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-06-05 |
| First published | 2022-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Satyam Lohiya |
| Maintainers | satyam2001 |
| Keywords | react, component, react-component, word, input, hinted-word |

## Links

- npm: https://www.npmjs.com/package/react-word-input
- Repository: https://github.com/Satyam-2001/React-Word-Input
- Homepage: https://github.com/Satyam-2001/React-Word-Input#readme
- Issues: https://github.com/Satyam-2001/React-Word-Input/issues
- npm.io page: https://npm.io/package/react-word-input

## 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.0.2 (latest) — 2022-06-05
- 1.0.1 — 2022-06-03

## README

<p align="center">
  <img src="https://user-images.githubusercontent.com/88069082/171333471-cd8c613b-380e-49d4-964e-ea6b1eef34e2.png" />
</p>


---

`WordInput` is a react functional component for input hinted word.

 It take value as the hinted word and callback functions onComplete/onEnter which return the word entered by user.

# Working Demo
<a href="https://Satyam-2001.github.io/React-Word-Input">
<div align="center">
  <p align="center">LIVE DEMO</p>
  <img src="https://user-images.githubusercontent.com/88069082/171338041-af8672d3-eca5-4961-bbc6-1da38a0f1eeb.gif" />
</div>
</a>


# Installation

This module is installed via npm:

```
npm install react-word-input
```

# Usage

```javascript
import './App.css';
import { WordInput } from 'react-word-input';

function App() {

  const print = (word) => {
    console.log(word);
  }

  return (
    <div className="App">
      <WordInput className='word' value={'W_R_ __P_T'} onChange={print} autoFocus />
    </div>
  );
}

export default App;

```

# API

| Name           | Type           | Required | Default | Description                                 |
| -------------- | -------------- | -------- | ------- | ------------------------------------------- |
| onChange       | Function       | false    | -       | Returns word everytime when word is changed
| onComplete     | Function       | false    | -       | Returns word when word is filled
| onEnter        | Function       | false    | -       | Returns word when user press enter
| value          | String         | true     | -       | The value of the hinted word  
| className      | String         | false    | -       | Class for input element
| disabled       | Boolean        | false    | false   | Disables the input
| autoFocus      | Boolean        | false    | false   | Auto focuses input on initial page load  
| spellCheck     | Boolean        | false    | false   | Check is word spells correct or not


# Author

<a href="https://github.com/Satyam-2001"> Satyam Lohiya </a>

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