loading...

Introducing Rex State πŸ¦–

dani_akash_ profile image Dani Akash πŸ§ͺπŸ’₯ ・1 min read

The simplest way to manage your React States! Check out the demo app

I have been using Redux and Mobx for managing states in my react projects. Ever since React Hooks were introduced I had been playing around with the Context API experimenting different ways to manage states.

I finally came up with Rex State, a tool that I have been using in my personal projects for creating re-usable hooks as well as state management.

The idea behind Rex State is making your states more declarative and providing an easy to use API to connect with the React Components. A classic example οΉ£

import React from "react";
import useRex from "rex-state";

const useInput = () => {
  const [state, setState] = useRex({ value: "" });

  return {
    get value() {
      return state.value;
    },
    updateValue(value) {
      setState({ value });
    }
  };
};

const InputField = () => {
  const { value, updateValue } = useInput();

  return (
    <input
      type="text"
      value={value}
      placeholder="Add Text here..."
      onChange={event => updateValue(event.target.value)}
    />
  );
};

export default InputField;

Rex State can also be used as a state management tool. A 400 bytes replacement to redux or mobx ✨

Follow this tutorial to see how to manage states with Rex State.

Feedbacks & PRs welcome! 😁

Github

Posted on by:

dani_akash_ profile

Dani Akash πŸ§ͺπŸ’₯

@dani_akash_

A React Developer who builds open source libraries for fun. You might actually like them! πŸ˜‰

Discussion

pic
Editor guide