JSPM

  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q56719F
  • License MIT

Class based state handler

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