https://github.com/psychollama/freeform-input

An optimized controlled input for React
https://github.com/psychollama/freeform-input

controlled form input react

Last synced: 3 months ago
JSON representation

An optimized controlled input for React

• Host: GitHub
• URL: https://github.com/psychollama/freeform-input
• Owner: PsychoLlama
• License: mit
• Created: 2020-11-20T07:05:52.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-19T06:24:52.000Z (3 months ago)
• Last Synced: 2024-10-19T06:33:54.249Z (3 months ago)
• Topics: controlled, form, input, react
• Language: TypeScript
• Homepage:
• Size: 5.16 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
React Freeform Input

  
A controlled <input> posing as an uncontrolled input.


  

    

  

  

    

  

  

    

  



## Install

```bash

$ yarn add freeform-input

```

## Purpose

React form controls fall in two categories:

[controlled](https://reactjs.org/docs/forms.html#controlled-components) and

[uncontrolled](https://reactjs.org/docs/uncontrolled-components.html). The

exact details are well documented elsewhere, but it doesn't matter, because

the dichotomy is a lie. You don't have to choose! There exists a perfect

middleground tradeoff, the Hybrid Controllable Input pattern.

An HCI behaves like a typical controlled input until it gains focus, then it

enters a freeform edit mode. Once the user is finished making changes,

a single change event is emitted and it snaps back to a declarative controlled

mode.

This is particularly useful with a centralized state management library like

Redux. You can sync your input state without needing a dispatch on every

keystroke, state changes won't wipe out your user's changes, and intermediate

edits don't violate validation rules.

## API

This library is functionally identical to `` save for one exception: it

overrides `onChange`:

```ts

const [inputState, updateState] = useState('input value')

```

The handler emits a value, **not an event**. This is due to a [limitation in

React](https://github.com/facebook/react/issues/9657) where they deviate from

browser behavior. React doesn't have a real `onChange` event.