React Stated
React Stated is a Higher Order Component that externalizes uncontrolled logic from your actual component. It greatly helps simplify the logic within your components while providing a wider API for users who wish to use your components as uncontrolled. Most useful when there are many fields in a form and keeping state is too much work.
Installation
You can install this package with the following command:
npm install react-stated
Examples
These examples demonstrate how you can use this library:
Default behavior
If provided with no properties it will try to match the React's own API:
;; Component { return <input value=thispropsvalue onChange=thispropsonChange/> } const StatedComponent = Component; // Treated as if it's uncontrolled. defaultValue and onChange work out of boxconst instance = ; // Extra goodiesinstance; // "foo"instance;instance; // back to "foo"
Other names
You can also pass an string or an array of strings to make stateful.
;; Component { return <div> <input value=thispropsmyValue onChange=thispropsonMyValueChange/> <input value=thispropsmyOtherValue onChange=thispropsonMyOtherValueChange/> </div> ; } const StatedComponent = Component; // Everything will change nameconst instance = ; instance;instance;instance; instance;instance;instance;
Advanced control over the naming and behavior
You can pass an object instead of string. Or an array of mixed objects and strings.
;; Component { superprops; // Some differed callbacks might look like this! this thisprops; } { return <div> <input value=thispropsval onChange=thishandle/> </div> ; } const StatedComponent = Component; // Everything will change nameconst instance = ; instance;instance;instanceclear;
Typings
The typescript type definitions are also available and are installed via npm.
License
This project is licensed under the MIT license.