react-axiom

React Axiom is a way to use models with React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-axiom
79170.5.24 years ago8 years agoMinified + gzip package size for react-axiom in KB

Readme

React Axiom
React Axiom is a way to use models with React.
npm version Build Status codecov

Links

Getting Started

Install React Axiom:
npm install --save react-axiom

To build a model class for an application, import and extend the React Axiom Model class:
import { Model } from 'react-axiom';

class Task extends Model {};

const task1 = new Task({
  completed: false,
  description: 'Hello world'
});

When instantiating a model, the Model base class will meta-program helper methods to set and access state. See the model reference for more information on these helper methods. For this particular example they are the following:
task1.isCompleted();
//=> false

task1.setCompleted(true);
task1.isCompleted();
//=> true

task1.getDescription();
//=> 'Hello world'

task1.hasDescription();
//=> true

task1.setDescription('Hello again');
task1.getDescription();
//=> 'Hello again'

Create a React component to display the task model and wrap the component with the higher-order React Axiom subscribe() function to ensure that the React component will re-render when the model's state changes:
import React from 'react';
import { subscribe } from 'react-axiom';

class TaskComponent from React.Component {
  render() {
    const { task } = this.props;
    return (
      <li>
        <input
          type="checkbox"
          onClick={() => task.setCompleted(true)}
          checked={task.isCompleted()}
        />
        {task.getDescription()}
      </li>
    );
  }
}

const TaskSubscriber = subscribe(TaskComponent);

Finally, use the wrapped component like any other React component and pass the model instance as a property:
ReactDOM.render(<TaskSubscriber task={task1} />);