Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@patomation/useglobal

patomation2MIT1.0.0TypeScript support: included

TypeScript NPM Package Starter

typescript

readme

useGlobal

A react hook for global local state

features:

  • multiple listener system
  • undo/redo
  • Generic Types support

Installation

yarn add my-component

or

npm install my-component --save

Usage

import { useGlobal } from '@patomation/useglobal'

const Component = (): React.ReactElement => {
  const [state, setState] = useGlobal({ color: 'red' })

  const { color } = state

  return (
    <div style={{
      color: color as string
    }}>

      {`My Color is ${color}`}

      <button onClick={(): void => {
        setState({ color: 'blue' })
      }}>
        {'Change Color'}
      </button>

    </div>
  )
}

Know issues

Jest testing

If you are testing with jest you will need to mock localStorage. I used jest-localstorage-mock and include it in my jest setup files config. See jest.config.js.

jest.config.js Example

module.exports = {
  ...
  setupFiles: [
    'jest-localstorage-mock'
  ]
}

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.0.0 (2023-01-31)

Features

Bug Fixes

  • husky (cc3ebaf)
  • removes iife browser module maker because webpack shouldnt be using browser modules but does anyway (2106cdb)
  • typescript generic (5b720f3)