use-state-track-prop v1.3.1

use-state-track-prop

pkg.module supported, which means that you can apply tree-shaking in you project

中文文档

A react hook for private state of component tracking some props

repository

https://github.com/livelybone/use-state-track-prop.git

Demo

https://github.com/livelybone/use-state-track-prop#readme

Run Example

Your can see the usage by run the example of the module, here is the step:

1. Clone the library git clone https://github.com/livelybone/use-state-track-prop.git
2. Go to the directory cd your-module-directory
3. Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
4. Open service npm run dev
5. See the example(usually is http://127.0.0.1/examples/test.html) in your browser

Installation

npm i -S use-state-track-prop

Global name - The variable the module exported in umd bundle

useStateTrackProp

Interface

import { Dispatch, SetStateAction } from 'react'

export interface TReducer<T, P> {
  (props: P, preState?: T): T;
}

/**
 * @param props       Assembly of the prop of the component
 *                    If props is a reference type, use `useMemo` hook to generate it for performance
 *
 * @param reducer     Please make sure the reducer is a pure function
 *
 * @return [state, setState]
 * */
export default function useStateTrackProp<T extends any, P extends any>(props: P, reducer?: TReducer<T, P>): [T, Dispatch<SetStateAction<T>>];

Usage

import React from 'react'
import useStateTrackProp from 'use-state-track-prop'

const Comp = ({ value }) => {
  const [$value, setValue] = useStateTrackProp(
    value,
    (value, preValue) => preValue || value,
  )
  
  return (
    <div>
      {$value}
      <button onClick={() => setValue(pre => !pre)}>Toggle Value</button>
    </div>
  )
}

Use in html, see what your can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/use-state-track-prop/lib/umd/<--module-->.js"></script>