Reusable React components for creating Single Page Apps
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo-app space fix Sep 23, 2018
dist preserve-3d removed fix Sep 19, 2018
storybook links to files Sep 16, 2018
.babelrc docs development Jun 12, 2018
.gitignore gitignore Sep 16, 2018
.npmignore npmignore Jun 12, 2018
CONTRIBUTING.md CONTRIBUTING.md Dec 1, 2017
LICENSE development Sep 8, 2017
README.md readme fix Sep 23, 2018
airr-react.js project structure reorganized Dec 6, 2017
lib symlink Mar 1, 2018
package-lock.json 2.0.20 Sep 19, 2018
package.json 2.0.20 Sep 19, 2018

README.md

airr-react

This library is set of several React components that helps building Single Page Apps for desktop and mobile apps aswell.
airr-react defines few basic UI classes and features that every app needs. The core component is resposible for maintaining navigation in the app. All of it when minified and gzipped weights only ~13.5kB (bundlephobia.com).

Library can be used for:

  • creating unique looking and behaving apps,
  • rapidly designing prototypes showing your ideas,
  • creating responsive apps that will handle mobile and desktop rendering.

To check all main features please go and see demonstration app: Mobile Demo App

and for documentation (still uncomplete) and intreactive examples check: Storybook

Installation

The library

npm install airr-react

The demo

If you want to explore demo app as a code refference just download demo-app directory content, open your system console and execute standard installation and start commands on this directory:

npm install;
npm start;

Example

Here's a simple code usage that provides a viewport with two views.

Edit airr-react-example

import React from "react";
import ReactDOM from "react-dom";
import { SceneWrapper, ViewWrapper, Sidepanel } from "airr-react";
import "airr-react/dist/airr-react.css";
import "./styles.css";

const BlueViewName = "blue-view";
const RedViewName = "red-view";

class BlueView extends ViewWrapper {
  content() {
    return (
      <div className={BlueViewName}>
        BlueView<br />
        <button onClick={this.props.goToRedView}>go to red</button>
        <button onClick={this.props.openSidepanel}>open sidepanel</button>
        <button onClick={this.props.openMayer}>open modal</button>
      </div>
    );
  }
}
class RedView extends ViewWrapper {
  content() {
    return (
      <div className={RedViewName}>
        RedView<br />
        <button onClick={this.props.goToBlueView}>go to blue</button>
      </div>
    );
  }
}

class Viewport extends SceneWrapper {
  viewsConfig = {
    [BlueViewName]: {
      type: BlueView,
      props: {
        name: BlueViewName,
        goToRedView: () => this.changeView(RedViewName),
        openSidepanel: this.openSidepanel,
        openMayer: () =>
          this.openMayer({
            name: "foo-mayer",
            content: (
              <div>
                Hello! I am modal layer!<br />
                <button onClick={() => this.closeMayer("foo-mayer")}>
                  close me
                </button>
              </div>
            )
          })
      }
    },
    [RedViewName]: {
      type: RedView,
      props: {
        name: RedViewName,
        goToBlueView: () => this.changeView(BlueViewName)
      }
    }
  };

  constructor(props) {
    super(props);

    this.state = {
      ...this.state,
      activeViewName: BlueViewName,
      sidepanel: {
        type: Sidepanel,
        props: {          
          children: "Hello! I'm sidepanel!"
        }
      },
      views: [
        this.getFreshViewConfig(BlueViewName),
        this.getFreshViewConfig(RedViewName)
      ]
    };
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Viewport />, rootElement);

Airr Components life-cycles

Airr library provides easy to implement app views life-cycles methods. When you are dealing with app development you have to deal with many tasks before or after certain view is activated and animated into the screen.

Like Reacts componentDidMount method, Airr provides self explanatory methods that can be used by Components that extends ViewWrapper and SceneWrapper components. These methods are:

  • viewBeforeActivation
  • viewAfterActivation
  • viewBeforeDeactivation
  • viewAfterDeactivation

You can search for these methods in demo-app code to find out how they are used.

License

Licensed under the MIT License. Copyright (c) 2018 Rafal Rajtar