DEV Community

Sebastian Korotkiewicz
Sebastian Korotkiewicz

Posted on

My npm package for simple state management in React

Welcome dev community!

Today I would like to introduce you to my npm package, which can be useful for any beginner or advanced JavaScript developer.

To check it out, just install it quickly and easily via npm

$ npm install react-atomize-store
# or
$ yarn add react-atomize-store
Enter fullscreen mode Exit fullscreen mode

A lightweight state management library that simplifies state handling in your applications. Easily manage and update your app's state with minimal code. With built-in support for IndexedDB, it provides a seamless way to persist your state, making it perfect for storing login tokens or other sensitive information securely.

Only two lines to begin with and already on the entire application you can use your state.

import { useAtom } from "react-atomize-store";
const App = () => {
  const [count, setCount] = useAtom("count");
}
Enter fullscreen mode Exit fullscreen mode

Best of all, it also works with React DevTools, where you can enable or disable it from the user's need.

import { useStore } from "react-atomize-store";

const App = () => {
  useStore(
    {
      count: 0,
      username: "adam",
      feeds: [],
      keypair: {},
    },
    true, // enable Redux DevTools
    ["keypair"] // atoms to store in IndexedDB
  );

  return <div>App</div>;
};
Enter fullscreen mode Exit fullscreen mode

There's even no need to add a useStore if you don't need to modify default values and settings, because useAtom already works by itself on your entire React application.

import { useAtom } from "react-atomize-store";

const Dashboard = () => {
  const [feeds, setFeeds] = useAtom("feeds");
  const [count, setCount] = useAtom("count");

  // Adding a new item to the 'feeds' array
  setFeeds((prev) => [...prev, feed]);

  // Overwriting the 'feeds' array with an empty array
  setFeeds([]);

  // Removing an element from the 'feeds' array
  setFeeds((prev) => prev.filter((item) => item.id !== feedId));

  setCount((prev) => prev + 1);

  console.log(feeds, count);

  return <div>Dashboard</div>;
};
Enter fullscreen mode Exit fullscreen mode

GitHub logo skorotkiewicz / react-atomize-store

A lightweight state management library that simplifies state handling in your applications. Easily manage and update your app's state with minimal code.

I invite you to test and write a few opinions what you think about the package.
I will gladly accept PR!

Top comments (0)