Package Exports

use-value-enhancer
use-value-enhancer/dist/use-value-enhancer.js
use-value-enhancer/dist/use-value-enhancer.mjs

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-value-enhancer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-value-enhancer

React hooks for value-enhancer.

Install

npm add use-value-enhancer value-enhancer react

Usage

useVal

useVal accepts a val from anywhere and returns the latest value.

It only triggers re-rendering when new value emitted from val (base on val equal`` not Object.iscomparison from ReactuseState`).

import { val } from "value-enhancer";
import { useVal } from "use-value-enhancer";

const val$ = val("value");

function Component({ val$ }) {
  const value = useVal(val$);
  return <p>{value}</p>;
}

useDerived

useDerived accepts a val from anywhere and returns the latest derived value.

Re-rendering is triggered when the derived value changes (Object.is comparison from React useState).

import { val } from "value-enhancer";
import { useDerived } from "use-value-enhancer";

const val$ = val("1");

function Component({ val$ }) {
  const derived = useDerived(val$, value => Number(value));
  return <p>{derived}</p>;
}

useFlatten

useFlatten accepts a val from anywhere and returns the latest value from the flatten val.

Re-rendering is triggered when the flatten value changes (Object.is comparison from React useState).

import { val } from "value-enhancer";
import { useFlatten } from "use-value-enhancer";

const val$ = val(val("1"));

function Component({ val$ }) {
  const value = useFlatten(val$); // "1"
  return <p>{value}</p>;
}

import { val } from "value-enhancer";
import { ReactiveMap } from "value-enhancer/collections";
import { useFlatten } from "use-value-enhancer";

const map = new ReactiveMap();
map.set("a", val("1"));

function Component({ map }) {
  const value = useFlatten(map.$, map => map.get("a")); // "1"
  return <p>{value}</p>;
}

useKeys

useKeys accepts a reactive collection and returns the latest keys as array.

import { ReactiveMap } from "value-enhancer/collections";
import { useKeys } from "use-value-enhancer";

const map = new ReactiveMap();

function Component({ map }) {
  const keys = useKeys(map);
  return keys.map(key => <p key={key}>{key}</p>);
}

useValues

useValues accepts a reactive collection and returns the latest values as array.

import { ReactiveSet } from "value-enhancer/collections";
import { useValues } from "use-value-enhancer";

const set = new ReactiveSet();

function Component({ set }) {
  const values = useValues(set);
  return values.map(value => <p key={String(value)}>{value}</p>);
}

Example

import React, { createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
import { val } from "value-enhancer";
import { useVal } from "use-value-enhancer";

const valFromProps$ = val("Props");
const valFromContext$ = val("Context");
const valFromExternal = val("External");

const ValContext = createContext(valFromContext$);

export const App = ({ valFromProps$ }) => {
  const valFromProps = useVal(valFromProps$);

  const valFromContext$ = useContext(ValContext);
  const valFromContext = useVal(valFromContext$);

  const valFromExternal = useVal(valFromExternal$);

  return (
    <>
      <p>
        {valFromProps}, {valFromContext}, {valFromExternal}
      </p>
      <p>Props, Context, External</p>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <ValContext.Provider value={valFromContext$}>
    <App valFromProps$={valFromProps$} />
  </ValContext.Provider>
);