TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

🛒 reactmart

code size     passing

Warning: You probably don't need this library. If you're looking for third-party React state-management, check out the zustand library first!

reactmart is a simple global state management solution built using React hooks. It's meant to imitate the design of Vuex of the Vue ecosystem, keeping your state in a plain-old-javascript-object (POJO).

This package ships with only three exports:

name export description
useStore default Custom hook that returns store object
StoreProvider named Context provider component
Store type Type used internally to convert store into a stateful store type

Each key/value in your store is returned by useStore with a state value and set method attached.

  • state is the current value of the state key.

  • set is a function that takes a new state value and updates the state value.

To use reactmart, first wrap the StoreProvider component at the root of your project, and pass it the initial state of each store variable in object notation:

// App.js
import React from 'react'
import { StoreProvider } from 'reactmart'
import Children from './Children'

export const App = () => 
    <StoreProvider value={{
        foo: "bar",
        biz: "baz"
        <Children />

Then, in any child of StoreProvider, call useStore to access the store. It's useful to destructure the result:

// Child.js
import React from ' react'
import useStore from 'reactmart'

export const Child = () => {
    const { foo } = useStore()

    return (
            {/* Displays "bar" */}

            {/* Updates foo to "buz" */}
                onClick={() => foo.set('buz')}
                Click me

By its nature, useStore doesn't know what's in your store. You can explicitly define your store's shape with TypeScript generics:

const store = useStore<{
    foo: string,
    bar: string

typeof store === {
    foo: {
        readonly state: string,
        set: React.Dispatch<React.SetStateAction<string>>
    bar: {
        readonly state: string,
        set: React.Dispatch<React.SetStateAction<string>>

It's recommended to seperate the store and provide its type throughout your app:

// store.ts
import useStore from "reactmart"

export const store = {
    foo: "bar",
    biz: "baz"

export const useTypedStore = () => useStore<typeof store>()

Or manually get the shape of the store to do whatever you want with it:

// store.ts
import type { Store } from "reactmart"

export const store = {
    foo: "bar",
    biz: "baz"

export type StoreType = Store<typeof store>

Package Sidebar


npm i reactmart

Weekly Downloads






Unpacked Size

4.66 kB

Total Files


Last publish


  • tinkoh