Introduction

Reactables provide a consistent API for state management across diverse use cases and UI frameworks.

Built on RxJS and reactive/declarative patterns, they reduce boilerplate so you can focus on business logic.

Note: While examples in these docs use React, Reactables are framework-agnostic. Examples for other frameworks may be added over time — contributions welcome!

Installation

Reactables require RxJS 6 or above.

# Core package (requires RxJS 6+)
npm i rxjs @reactables/core

# React bindings
npm i @reactables/react

Create your first Reactable!

import { RxBuilder } from '@reactables/core';

export const RxToggle = (initialState = false) =>
  RxBuilder({
    initialState,
    reducers: {
      toggleOn: () => true,
      toggleOff: () => false,
      toggle: (state) => !state,
    },
  });

Bind to the view!

Edit this snippet

import { RxToggle } from './RxToggle';
import { useReactable } from '@reactables/react';

function App() {
  const [toggleState, actions] = useReactable(RxToggle);
  const { toggleOn, toggleOff, toggle } = actions;
  return (
    <>
      <h5>Reactable Toggle</h5>
      Toggle is: {toggleState ? 'On' : 'Off'}
      <br />
      <button onClick={toggleOn}>Toggle On</button>
      <button onClick={toggleOff}>Toggle Off</button>
      <button onClick={toggle}>Toggle</button>
    </>
  );
}

export default App;

Edit this snippet

import { RxToggle } from './RxToggle';

const [state$, actions] = RxToggle();
const { toggleOn, toggleOff, toggle } = actions;

state$.subscribe((toggleState) => {
  // Update the view when state changes.
  document.getElementById('toggle-state')
    .innerHTML = toggleState ? 'On' : 'Off';
});

// Bind click handlers
document.getElementById('toggle-on')
  .addEventListener('click', toggleOn);
document.getElementById('toggle-off')
  .addEventListener('click', toggleOff);
document.getElementById('toggle')
  .addEventListener('click', toggle);

Edit this Page

Next Core Concepts