Creeks NPM | npm.io

Creeks

React global state management "Easy and Fast"

Basic demo: codesandbox

Advanced demo: codesandbox

Install

npm install --save creeks

Basic usage

store.js

import createState from 'creeks'

const store = {

    username: createState()
}

export default store

ChildA.js

import React from 'react'
import { useCopy } from 'creeks'
import store from './store'

const ChildA = () => {

    /**
     * Username Global state
     */
    const [username] = useCopy(store.username)

    return <p>Im "ChildA" and your username is {username}</p>
}

export default ChildA

ChildB.js

import React from 'react'
import { useCopy } from 'creeks'
import store from './store'

const ChildB = () => {

    /**
     * Username Global state
     */
    const [username] = useCopy(store.username)

    return <p>Im "ChildB" and your username is {username}</p>
}

export default ChildB

Control.js

import React from 'react'
import store from './store'

const Control = () => {

    return <button onClick={() => store.username.update('CreeksDev')}>Set username</button>
}

export default Control

index.js

import React from 'react'
import { createRoot } from 'react-dom/client'
import ChildA from './ChildA'
import ChildB from './ChildB'
import Control from './Control'


const App = () => {

    return (
        <React.Fragment>
            <ChildA />
            <hr />
            <ChildB />
            <hr />
            <Control />
        </React.Fragment>
    )
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Important

If you update to "React 18" Make sure to make these changes in the index.js file

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

know more: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html