@santerijps/realm v1.0.0

realm

realm is an attempt to introduce an Elm -like feel when developing React apps. This is achieved with a custom hook (useRealm) that utilizes React's useReducer to smoothly update the state when needed.

realm reintroduces some of the terminology found in Elm, so in your components you'll

• Define your own Model type to represent the component state
• Define your own component messages with the Msg type
• Use the Cmd<T> type when you want to mutate your state and re-render your view
• Implement the init, update and view functions

Check out the official Elm documentation to get a better idea of how Elm architecture plays out.

Install

npm i @santerijps/realm

Example usage

Compare the example below to the example found in Elm's documentation to see how similar they look.

Disclaimer: The below example is trying to mimic the exact look of Elm. In real usage, you would most likely implement it differently ;)

import { Cmd, UpdateParams, useRealm } from "@santerijps/realm";



// MAIN


export default function () {
  return useRealm(init, update, view, undefined);
}



// MODEL


type Model = number;


const init = () =>
  0



// UPDATE


type Msg = 'Increment' | 'Decrement'


const update = ({ msg, model }: UpdateParams<Model, Msg>) =>
  ( msg == 'Increment' ? model + 1
  : msg == 'Decrement' ? model - 1
  : model
  )



// VIEW


const view = (model: Model, { Increment, Decrement }: Cmd<Msg>) =>
  <div>
    <button onClick={Decrement}>{'-'}</button>
    <div>{model}</div>
    <button onClick={Increment}>{'+'}</button>
  </div>