@monynethala/use-state-values
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Use-State-Values

A react hook which provides simple abstraction over state to push state updates to leaf components

create state anywhere and render the state only in the components which depend on it

Installation

npm install @monynethala/useStateValues

Api

class StateValue<V = any> {
    private current;
    private prev;
    private readonly subscribers;
    constructor(initialValue?: V);
    get(): V | undefined;
    set(current: V | ((prevValue: V) => V)): V;
    subscribe(updater: Updater<V>, call?: boolean): () => void;
    unsubscribe(updater: Updater<V>): void;
    getPrevious(): V | undefined;
    private notifySubscribers;
}

type StateValues<T extends object> = {
    [K in keyof T]: T extends StateValue<infer U> ? T : StateValue<T>;
};

type Valid<T> = {
     [P in keyof T]: T[P] extends Primitive | StateValue<any> ? T[P] : never;
 };

function useStateValues<T extends Valid<T>>(initialValue: T): [StateValueState<T>, StateValues<T>];

Basic Usage

import useStateValues from '@monynethala/useStateValues'

function App() {
const Nested = ({ prop }: { prop: StateValue<number> }) => {
  
  const [renderState, stateValues] = useStateValues({ x: prop });
  const { x } = renderState;
  return (
      <div>{x}</div>
  );
};

export default function App() {
  const [renderState, stateValues] = useStateValues({ x: 0, y: "mony" });

  // Destructure renderState to convert StateValue to state
  const { x } = renderState;

  const intervalRef = useRef<number | undefined>();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      values.y.setCurrent((x) => x + 1);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

 // Component rerenders only when the 'x' changes

  return (
    <div className="App">
      <div>{x}</div>
      <Nested prop={values.y} />
    </div>
  );
}

Readme

Keywords

none

Package Sidebar

Install

npm i @monynethala/use-state-values

Weekly Downloads

0

Version

1.0.0

License

none

Unpacked Size

11.3 kB

Total Files

5

Last publish

Collaborators

  • monynethala