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.compare not Object.is comparison from React useState).

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

const value = useVal(val$);

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>
);

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 { useDerived } from "use-value-enhancer";

const value = useDerived(val$, value => Number(value));