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-hands

v1.0.5

Published

React's Own Hands Touching State The Easiest Way!

Downloads

13

Readme

🧤 React Hands

By Hussein Kizz, First Beta Release v1.0.5

React's Own Hands Touching State The Easiest Way!

Unlike others, react hands focuses on easiness and takes a shorthand approach to managing state in your react applications by using react's built in hooks mainly useContext and useReducer which are pretty handy by the way, and also emphasize a single source of truth or global state philosophy to allow managing state at scale a breeze, though local state approach is also supported intuitively. And with that said, react-hands is a lightweight, simple and easiest to use state management library to help you manage your application's state without having to learn that much anything new, as the library provides a StoreProvider wrapper component and a useStore hook for accessing and updating the state just as you would almost do it with react itself, resulting into a simillar and easy to use state management pattern.

Key Features

  • 👐 Open Source
  • 🤏 Light Weight
  • 👌 As Easy As useState()
  • 👏 Typscript Support
  • 🙏 No Boilerplate
  • ✌️ Full Of Handies!

Installation

You can install the react-hands library using npm or yarn:

npm install react-hands
# or
yarn add react-hands

Usage

React Hands is so easy to use, you can play with it here to see for yourself or follow the step by step instructions below:

👍 Try It

Creating the Store

To create the store, use the reactState function. It takes three arguments:

  1. initialState: an object representing the initial state of your application's state.
  2. actions: an object containing functions that update the state in response to dispatched actions.
  3. middlewares (optional): an array of middleware functions that modifies the dispatch behavior.

💡Middlewares basically help you mutate state with a custom fucntion or an array of functions in given order, before the dispatched action takes place, this will be available in next release.

Meanwhile here is how to create a store:

// App.jsx

import { reactState } from "react-hands";

const initialState = { count: 0 };

const actions = {
  increment: (state, action) => ({ count: state.count + 1 }),
  decrement: (state, action) => ({ count: state.count - 1 }),
};

Providing the Store

Wrap your top-level component, app or layout with the StoreProvider component to provide the store to your app and to all it's child components.

// App.jsx

const { StoreProvider } = reactState(initialState, actions);

function App() {
  return (
    <StoreProvider>
      <MyComponent />
    </StoreProvider>
  );
}

Accessing the State

To access the state in your components, use the useStore hook. It returns an array with the current state and the dispatch function, simillar to useState hook in react!

// MyComponent.jsx

import { reactState } from "react-hands";

const { useStore } = reactState();

function MyComponent() {
  const [state, dispatch] = useStore();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

💡 Notice: The dispatch type such as increment should match the same state name in store such as increment exactly, otherwise react hands will blow an error in console, so watchout and let's continue!

Updating the State

To update the state, dispatch an action to the store. The action is an object with a type property that corresponds to one of the functions in the actions object. For example here both the increment and decrement actions increase and decrease the count in store respectively!

const actions = {
  increment: (state, action) => ({ count: state.count + 1 }),
  decrement: (state, action) => ({ count: state.count - 1 }),
};

// dispatching action...
dispatch({ type: "increment" });

Handling Errors

If an action with an unrecognized type is dispatched, react hands will log some error to the console and return the current state as is. The error message will usually be reminding you to use the same name as the state in your dispatch action. And more error handlers are being worked on!

🔥 Bonus

Did you know, react-hands supports typescript out of the box, it also provides types for state and dispatch, you just have to import a type like $typeName from react hands like this for example:

// MyApp.tsx

import { $Action, $State, reactState } from "react-hands";

export default function MyApp() {
  const initialState = {
    isDarkMode: false,
    count: 0,
  };

  const actions = {
    toggleDarkMode: (state: $State) => ({
      ...state,
      isDarkMode: !state.isDarkMode,
    }),
    increment: (state: $State) => ({
      ...state,
      count: state.count + 1,
    }),
    decrement: (state: $State) => ({
      ...state,
      count: state.count - 1,
    }),
  };

  const { StoreProvider } = reactState(initialState, actions);

  return (
      <StoreProvider>
          <MyComponent/>
      </StoreProvider>
  );
}

Conclusion

The react-hands library provides a simple way to manage state in your React applications. It's easy to use, and its lightweight nature makes it a great option for react projects small or complex. It's still work in progress, therefore contributions are welcomed, we will be updating this documentation to explore other patterns such as adding items to store from any component other than main or top level component, persisting state depsite page reloads etc.

😇 Pro Tip: If it works don't tocuh it, or break that comfort zone and give this a try!!!