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

    0.6.8 • Public • Published


    npm version npm bundle size code coverage typescript supported

    The state manager to reduce developers' coding time and increase the lifetime of your codebase.

    Realar targeted to all scale applications up to complex enterprise solutions on modular architecture.

    • Logic free React components. Perfect instruments for moving all component logic outside. Your React component will be clean from any unnecessary code, only view, only JSX, no more.
    • Lightweight and Fast. Less then 5kB. Aims at the smallest size of the resulting bundle. And only parts are updated in which is really necessary to make changes.
    • Value and Signal is the big elephants remind Store and Action from Redux. Allows you to perform familiar coding techniques, and also add many modern features.
    • Declarative and Imperative both supported.
    • Stream event and value programming.
    • Modular Architecture. Possibilities for the implementation of three levels of logic availability. Shared stateful is available for any part of your app. Scoped logic decomposition for React component context visibility. And React component local logic.
    • Decorators for classes lovers. Support OOP as one of the primary syntaxes. The implementation of transparent functional reactive programming (TFRP) with React (looks similar to Mobx). And the babel plugin for automatic wrap all arrow JSX functions for the best clean code.


    You can make stores and "actions" play on runkit

    const store = value(0)
    const add = store.updater((state, num) => state + num)
    const inc = store.updater(state => state + 1)

    And bind to React easily play on codesandbox

    const App = () => {
      const state = useValue(store)
      return <p>{state}
        <button onClick={inc}>+</button>

    You can make streams play on runkit

    const addendum = value('0').pre(ev =>
    const sum = signal()
      .map(() => +addendum.val)

    And bind to React play on codesandbox

    const App = () => {
      const addendumState = useValue(addendum)
      return <p>
        <input value={addendumState} onChange={addendum} />
        <button onClick={sum}>sum</button>

    You can use classes with decorators

    class Counter {
      @prop state = 0
      add = (num) => this.state += num
      inc = () => this.add(1)

    And bind to React play on codesandbox

    const App = observe(() => {
      const { state, inc } = useLocal(Counter)
      return <p>{state}
        <button onClick={inc}>+</button>

    And you can use it together play on codesandbox

    const counter = new Counter()
    const store = value.from(() => counter.state)
    export const App = observe(() => (
        <button onClick={}>+</button>



    • Hello - shared state demonstration.
    • Todos - todomvc implementation.
    • Jest - unit test example.

    In Production



    npm install realar
    # or
    yarn add realar

    Enjoy and happy coding!


    npm i realar

    DownloadsWeekly Downloads






    Unpacked Size

    220 kB

    Total Files


    Last publish


    • betula