https://github.com/crimx/use-value-enhancer

React hooks for value-enhancer
https://github.com/crimx/use-value-enhancer

data-flow frp functional-reactive-programming hooks model observable react react-hooks reactive reactjs

Last synced: about 2 months ago
JSON representation

React hooks for value-enhancer

• Host: GitHub
• URL: https://github.com/crimx/use-value-enhancer
• Owner: crimx
• License: mit
• Created: 2022-08-04T08:48:32.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-22T04:54:52.000Z (about 1 year ago)
• Last Synced: 2025-05-05T20:14:39.698Z (about 2 months ago)
• Topics: data-flow, frp, functional-reactive-programming, hooks, model, observable, react, react-hooks, reactive, reactjs
• Language: TypeScript
• Homepage: http://crimx.github.io/use-value-enhancer/
• Size: 274 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-value-enhancer



  



[![Build Status](https://github.com/crimx/use-value-enhancer/actions/workflows/build.yml/badge.svg)](https://github.com/crimx/use-value-enhancer/actions/workflows/build.yml)

[![npm-version](https://img.shields.io/npm/v/use-value-enhancer.svg)](https://www.npmjs.com/package/use-value-enhancer)

[![Coverage Status](https://img.shields.io/coveralls/github/crimx/use-value-enhancer/main)](https://coveralls.io/github/crimx/use-value-enhancer?branch=main)

[![minified-size](https://img.shields.io/bundlephobia/minzip/use-value-enhancer)](https://bundlephobia.com/package/use-value-enhancer)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000)](http://commitizen.github.io/cz-cli/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-brightgreen.svg?maxAge=2592000)](https://conventionalcommits.org)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

React hooks for [value-enhancer](https://github.com/crimx/value-enhancer).

## Install

```bash

npm add use-value-enhancer value-enhancer react

```

## Usage

### useVal

`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}
;

}

```


### useDerived

`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}
;

}

```


### 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.

```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}
;

}

```


### useKeys

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

}

```


### useValues

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

}

```


### Example

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

  

    

  

);

```