use-value-enhancer



React hooks for value-enhancer.

Install

``bash
npm add use-value-enhancer value-enhancer react
`

Usage

$3

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

It triggers re-rendering when new value emitted from val (base on val $version instead of React's Object.is comparison).

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

const val$ = val("value");

function Component({ val$ }) {
const value = useVal(val$);
return

{value}

;
}
`

$3

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

Re-rendering is triggered when the derived value changes.

`tsx
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

{derived}

;
}
`

$3

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

Re-rendering is triggered when the flatten value changes.

`tsx
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

{value}

;
}
`

`tsx
import { val } from "value-enhancer";
import { reactiveMap } from "value-enhancer/collections";
import { useFlatten } from "use-value-enhancer";

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

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

{value}

;
}
`

$3

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

`tsx
import { reactiveMap } from "value-enhancer/collections";
import { useKeys } from "use-value-enhancer";

const map = reactiveMap();

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

{key}

);
}
`

$3

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

`tsx
import { reactiveSet } from "value-enhancer/collections";
import { useValues } from "use-value-enhancer";

const set = reactiveSet();

function Component({ set }) {
const values = useValues(set);
return values.map(value =>

{value}

);
}
`

$3

`jsx
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 (
<>



{valFromProps}, {valFromContext}, {valFromExternal}


Props, Context, External

);
};

ReactDOM.createRoot(document.getElementById("root")).render(



);
``