Entire State Management Instantly with React hooks.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
flow-typed
src
test
.all-contributorsrc
.eslintrc
.flowconfig
.gitignore
.npmignore
LICENSE
README.md
babel.config.js
jest.config.js
package.json
rollup.config.js
yarn.lock

README.md

muriatic CircleCI tested with jest jest All Contributors

Entire State Management Instantly with React hooks.

Usage

In bellow example, muriatic exposing all API and usecase. Please keep this in mind initialStore must be Plain Object.
This Library using Store word as a Entire State which above between Components.

If you don't have strong knowledge of React, it doensn't matter. muriatic doesn't contain complicated mechanism. I wish many people to enjoy software development using React.

Demo

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() // store is plain object for grobal state. anytime enable to access like store.count

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

  return (
    <Layout>
      <div>
        <button onClick={inrement}>increment</button>
        <button onClick={decrement}>decrement</button>
      </div>
      <p>{store.count}</p>
    </Layout>
  )
}

Install

On your React project root directory, run bellow yarn commands.

yarn add muriatic
yarn add react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2

⚠️ In this time,(2018 Dec 26) hooks is only available for alpha ver.

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.inrement}>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.inrement = () => setStore({ count: store.count + 1 })
  Action.decrement = () => setStore({ count: store.count - 1 })

  return Action
}

export default useAction

LICENSE

MIT

Contributors

Thanks goes to these wonderful people (emoji key): I want to implove this library(espesialy stability), your contribute is so helpful!


ryota-murakami

💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!