npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-wonka

v2.0.1

Published

Several hooks for using Wonka streams with React

Downloads

491

Readme

react-wonka

Several hooks to effectively use Wonka streams with React.

Wonka streams are an effective way to abstract streams (or rather "sources") of changing values. When integrating them with React it's likely that your code will mostly look the same every time, since you'll be handling:

  • Some kind of changing prop or other input
  • Subscribing and unsubscribing
  • Safety around React Concurrent Mode
  • Cooperating with React's effects and scheduling system

It's very common to create a Wonka source using makeSubject from a changing prop. Or you may also be subscribing (and unsubscribing) to a new source every time some kind of input or prop changes.

Wonka streams can additionally be synchronous or asynchronous, so integrating them correctly into React's updates, while taking advantage of synchronous results is hard, and especially complicated with Concurrent Mode.

This library exposes two hooks to solve this problem, useOperator and useOperatorValue. The latter is just a convenience alias for the first.

API

useOperator

const [result, update] = useOperator(makeStream, input, init);

This hook is the same as useOperatorValue, but it returns the result and an update function.

The update function can be used to force an additional value to be sent to the internal stream that makeStream receives. It's like useReducer's dispatch function or like a forceUpdate function.

This can be an effective replacement for useReducer that can integrate asynchronous side-effects or complex changes cleanly.

useOperatorValue

const result = useOperatorValue(makeStream, input, init);

Returns a stateful value that has been produced by a stream, which emits the changing input values.

The hook accepts a makeStream function which is called once using an input Wonka stream. This stream will synchronously receive input every time it changes and on initial mount.

You can then use any Wonka operator to transform this input stream and return a new stream. The values that your stream emits will be returned as result.

The init argument determines the initial value for result, in case your stream is asynchronous. It's important to provide some kind of value for it so that your stream may also emit values at a later point, while React is allowed to keep rendering immediately.

You can use both asynchronous or synchronous streams (or mixed ones) with this hook. It will correctly return synchronous values immediately, while triggering updates for asynchronous ones.

import { pipe, map, delay, merge } from 'wonka';
import { useOperatorValue } from 'react-wonka';
useOperatorValue(
  x =>
    merge([
      pipe(
        x,
        map(x => x + 1)
      ),
      pipe(
        x,
        map(x => x + 2),
        delay(10)
      ),
    ]),
  input,
  0
);
// For input = 0 this returns:
// - `1` immediately
// - then updates and returns `2` after 10ms