Package Exports
- use-state-handler
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-state-handler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
useStateHandler
Class based hook. bring the value of hooks and class based definitions together ( including this.setState )
Maintain a unique instance of the handler class on memory.
Heavy functions are not instantiated in every render. Minimal code.
Forget about useCallback, useReducer and custom hooks.
How to use
1.- Create a handler class C_Handler that extends StateHandler < StateType >. Add all setState operations you want to this class.
2.- Use the hook useStateHandler( C_Handler, initial_Value ). This hook returns [ state, C_Handler ]
3.- enjoy!
Example
import { StateHandler, useStateHandler } from './handler';
class CertH extends StateHandler<ICert> {
public setValue( name: string, val : any ){
this.setState ( {...this.state, ...{ [name] : val } } )
}
}
const ModalCert: FunctionComponent<ModalProps>
= ({ modalProps, toggler}) => {
const [ cert, handler ] = useStateHandler( CertH, {} );
return (
<div className="box">
<h3 className="title">New Cert</h3>
<form autoComplete="off">
<Input
type='text'
placeholder="ej: Jhon"
value={cert.name}
name="name"
onChange={ e => handler.setValue( e.target.name, e.target.value ) }
/>
<Input
type='text'
placeholder="ej: Jhon@mail.com"
value={cert.mail}
name="mail"
onChange={ e => handler.setValue( e.target.name, e.target.value ) }
/>
</form>
</div>
);
};
Here handler is the instance of CertH