react-scenedirector

    1.1.6 • Public • Published

    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.

    Install

    npm i react-scenedirector

    DownloadsWeekly Downloads

    1

    Version

    1.1.6

    License

    MIT

    Last publish

    Collaborators

    • stoney