https://github.com/finesse/react-friendly-input
React components to make a not interrupting input field
https://github.com/finesse/react-friendly-input
friendly higher-order-component input library react react-component reactjs select textarea ui usability
Last synced: about 2 months ago
JSON representation
React components to make a not interrupting input field
- Host: GitHub
- URL: https://github.com/finesse/react-friendly-input
- Owner: Finesse
- License: mit
- Created: 2018-05-03T02:47:59.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-24T04:33:44.000Z (over 5 years ago)
- Last Synced: 2025-08-09T14:28:30.628Z (10 months ago)
- Topics: friendly, higher-order-component, input, library, react, react-component, reactjs, select, textarea, ui, usability
- Language: JavaScript
- Homepage:
- Size: 83 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Friendly Input
[](https://www.npmjs.com/package/react-friendly-input)
[](https://bundlephobia.com/result?p=react-friendly-input)
This is a set of [React](https://reactjs.org) form field components which don't change their value programmatically
when focused. It helps to build controlled inputs that don't annoy users.
Here is a simple example. It is a React application where a user can change his/her name. A name must not start or end
with a space and must be not more than 10 characters long. The user is typing ` I am typing a text ` and pressing Tab.
Plain inputFriendly input
```jsx
class App extends React.Component {
state = {
name: ''
};
setName = event => {
this.setState({
name: event.target.value
.trim().slice(0, 10)
});
};
render() {
return ;
}
}
ReactDOM.render(, document.body);
```
```jsx
class App extends React.Component {
state = {
name: ''
};
setName = event => {
this.setState({
name: event.target.value
.trim().slice(0, 10)
});
};
render() {
return ;
}
}
ReactDOM.render(, document.body);
```
[Live demo](https://codepen.io/TheFinesse/pen/XqRVRL?editors=0010)
## Status
[](https://travis-ci.org/Finesse/react-friendly-input)
[](https://david-dm.org/Finesse/react-friendly-input)
[](https://david-dm.org/Finesse/react-friendly-input?type=dev)
[](https://david-dm.org/Finesse/react-friendly-input?type=peer)
## Installation
There are several ways to install the components:
Simple
Download the [plugin script](dist/react-friendly-input.umd.min.js) and import it using a `` tag after the React
import.
```html
<!-- React -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js">
```
AMD/RequireJS
The script requires the following AMD modules to be available:
* `react` — React.
Installation:
```js
require.config({
paths: {
react: '//cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min',
'react-friendly-input': '//cdn.jsdelivr.net/npm/react-friendly-input@0.1.4/dist/react-friendly-input.umd.min'
}
});
define('myModule', ['react-friendly-input'], function (reactFriendlyInput) {
// ...
});
```
Node.js/NPM/Yarn/Webpack/Rollup/Browserify
Install the package:
```bash
npm install react-friendly-input --save
```
Require it:
```js
const reactFriendlyInput = require('react-friendly-input');
```
## Usage
The components are rendered like the plain React form fields. All the props are passed to the underlying DOM elements.
```jsx
const {Input, TextArea, Select} = reactFriendlyInput;
ReactDOM.render(
No
Yes
,
document.body
);
```
If a field is focused, the field value doesn't change when a new value is given through the props.
The new value is applied as soon as the field loses the focus.
A component can be uncontrolled:
```jsx
const {Input} = reactFriendlyInput;
return ;
```
You can change a field value using the `value` property. If the field is focused the value doesn't change.
```jsx
const {Input} = reactFriendlyInput;
let input;
ReactDOM.render( input = i} />, document.body);
input.value = 'value2';
```
You can set a new value despite the focus using the `forceValue` method:
```jsx
input.forceValue('value2');
```
### Making a custom friendly input
If you have a component that acts like a form field:
* Its element has a writable `value` attribute
* Has the `defaultValue`, `onFocus` and `onBlur` props that acts the same as in the `` component
* Uncontrolled when doesn't receive the `value` prop
You can use the [higher-order component](https://reactjs.org/docs/higher-order-components.html) function to make it
friendly:
```js
const {palInput} = reactFriendlyInput;
class CustomField extends React.Component {
// ...
}
const FriendlyCustomField = palInput(CustomField);
```
### Getting a reference to the DOM element
If you need to get a reference to the underlying element (e.g. to focus it), you have several options.
First is to use the friendly input `input` property:
```jsx
const {Input} = reactFriendlyInput;
return friendlyInput.input.focus()} />;
```
Second is to use the `inputRef` prop:
```jsx
const {Input} = reactFriendlyInput;
return input.focus()} />; // String refs are not supported here
```
## Building and testing
The source code is located in the `src` directory. When you first download the code, install
[node.js](https://nodejs.org/) version 8 or greater, open a console, go to the project root directory and run:
```bash
npm install
```
Run to compile the source code:
```bash
npm run build
```
Run to test:
```bash
npm test
```
Compile the code before testing because the test uses the compiled code.
An Internet connection is required to test because multiple React versions are downloaded while testing.
## Versions compatibility
The project follows the [Semantic Versioning](http://semver.org).
## License
MIT. See [the LICENSE](LICENSE) file for details.