Muriatic NPM | npm.io

muriatic

const [store, setStore] = useStore() One Shot React Data Sharing Built on Context 🍸

movie

Usage
Why
Resource
Installation
API
- <Provider store={Store>} />
- const [store, setStore] = useStore()
Get value from store
- update store with setStore(store: Object)
Advanced
TypeScript
- Example
LICENSE
Contributors

Usage

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Layout } from './style'
import Provider, { useStore } from 'muriatic'
 
// initialStore must be Plain Object
const initialStore = { count: 0 }
 
ReactDOM.render(
  <Provider store={initialStore}>
    <App />
  </Provider>,
  document.getElementById('root')
)
 
function App() {
  const [store, setStore] = useStore()

  return (
    <Layout>
      <div>
        <button onClick={() => setStore({ count: store.count + 1 })}>increment</button>
        <button onClick={() => setStore({ count: store.count - 1 })}>decrement</button>
      </div>
      <p>I have {store.apple.count} apple </p>
    </Layout>
  )
}

Play 👇

https://muriatic-demo.netlify.com/ Same code as above usage's one.

Why

I need sharable state over the component hierarchy that can setup immediately like one shot.
There are bunch of similar feature library, blog posts with code example but I'm not sophisticated person. And I'm so lazy who feel hard to thinking Action Name of State Management Library.

Honestly I wanna global version of setState(). It is really favorite API because my order is...
me: I have a value so I wanna setState() it. ...that's it!

I made setStore() custom hooks based on above motivation and packing as a npm-package in order to setup one shot anywhere 🍸

Also muriatic library might be heplful reduce coding time and naming tasks when Data Sharing between another components.
I guess effective for small app, prototyping, experiment etc.

Resource

React+TypeScript Cheatsheets: Example App React TypeScript Todo Example 2019 Mid is created with muriatic.

Installation

npm install muriatic

API

`<Provider store={Store>} />`

Make your GrobalStore as a PlainObject.(eg: const GlobalStaate = {foo: "bar"})
And Wrap Provider in your root app component.

import Provider from 'muriatic'

// initialStore must be Plain Object
const initialStore = { count: 0 }

ReactDOM.render(
  <Provider store={initialStore}>
    <App />
  </Provider>,
  document.getElementById('root')

`const [store, setStore] = useStore()`

This is completely similar to React built-in hook such as useState().
store left value is store object. And setStore right value is update function.

Get value from `store`

// example
import { useStore } from 'muriatic'

const AppleComponent = () => {
  const [store, setStore] = useStore()
  
  return (<div><{store.thisIsMyValue}/div>)
}

update store with `setStore(store: Object)`

// example
import { useStore } from 'muriatic'

const NINTENDOComponent = () => {
  const [store, setStore] = useStore()
  const orderSmashBros = () => setStore({sales: store.sales + 1 })
  
  return (<button onClick={orderSmashBros}>You can not wait!!</button>)
}

Advanced

This is action abstraction example utilize custom Hooks.

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Provider, { useStore } from 'muriatic'
import { Layout } from './style'
import useAction from './actions'

const initialStore = { count: 0 }
ReactDOM.render(
  <Provider store={initialStore}>
    <App />
  </Provider>,
  document.getElementById('root')
)

function App() {
  const action = useAction()
  return (
    <Layout>
      <div>
        <button onClick={action.increment}>increment</button>
        <button onClick={action.decrement}>decrement</button>
      </div>
      <p>{useStore().store.count}</p>
    </Layout>
  )
}

src/actions.js

import { useStore } from 'muriatic'

function useAction() {
  const [store, setStore] = useStore()

  const Action = {}
  Action.increment = () => setStore({ count: store.count + 1 })
  Action.decrement = () => setStore({ count: store.count - 1 })

  return Action
}

export default useAction

Multiple Store

・Play 👇

TypeScript

This package contains index.d.ts type definition file, so you can use it in TypeScript without extra setting.

Example

import React, { ReactElement } from 'react'
import ReactDOM from 'react-dom'
import Provider, { useStore } from 'muriatic'

interface Food {
  id: string
  name: string
}

type TodoList = Todo[]

interface Store {
  FoodList: FoodList
}

let initialStore: Store = {
  foodList: []
}

const App = () => {
const [store, setStore] = useStore<Store>() // pass store object type to generics
const item1: Food = {id: 'j4i3t280u', name: 'Hamburger'}
const item2: Food = {id: 'f83ja0j2t', name: 'Fried chicken'}
setStore({foodList: [item1, item2]})

const foodListView: ReactElement[] = store.foodList.map((f: Food) => <p key={f.id}>{f}</p>)

return (<div>{foodListView}</div>)
}

ReactDOM.render(
    <Provider store={initialStore}>
      <App>
    </Provider>,
  document.getElementById('root')
)