Managing scenes in React projects
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.eslintignore
.eslintrc.yml
.gitignore
.travis.yml
README.md
ava-jsdom-setup.js
package.json

README.md

react-scenedirector

Managing scenes/screens in React projects

Build Status Dependency Status devDependency Status codecov.io

Modeled after https://github.com/freezedev/lyria. The API is in the "figuring things out" mode.

Usage

import React from 'react';
import ReactDOM from 'react-dom';

import SceneDirector from 'react-scenedirector';

const Scene1 = ({ switchToScene }) => {
  const onClick = () => switchToScene('Scene2');

  return (
    <div>
      <button onClick={onClick}>Switch to Scene 2</button>
    </div>
  );
};

const Scene2 = ({ switchToScene }) => {
  const onClick = () => switchToScene('Scene1');

  return (
    <div>
      <button onClick={onClick}>Switch to Scene 1</button>
    </div>
  );
}

const App = () => (
  <SceneDirector
    scenes={{ Scene1, Scene2 }}
    initialScene="Scene1" />
);

ReactDOM.render(App, document.getElementBy('content'));

Props

scenes

Type: Object

Requires an object in the from { [String]: ReactNode }.

initialScene

Type: String

The name of the initial scene that will be shown

Switch through scenes is possible either with props.switchToScene or this.context.switchToScene. Switching between scenes using props will be deprecated in the future.

onSwitchScene

Type: Function

This function will be called once we switch to a scene. It will also be called for the initial scene.

Will this be available for React Native?

Yes, at some point... maybe. Not right now. But if you a pull request for that, I'd be eternally grateful.