Scene management in React

Usage no npm install needed!

<script type="module">
  import reactScenedirector from '';



Managing scenes/screens in React projects

Build Status Dependency Status devDependency Status

Modeled after The API is in the "figuring things out" mode.


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

import SceneDirector from 'react-scenedirector';

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

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

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

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

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

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



Type: Object

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


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.


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.