react-switch-context

A tiny library that switch react component around the React Context API.

Get Started

Use the command line:

```
npm install react-switch-context --save
```


```
yarn add react-switch-context
```

Usage

import React from 'react';
import { render } from 'react-dom';
import Switch, { Screen } from '../../dist/index.js';

export default render(
  <Switch
    notFoundView={_ => <div>404 no found</div>}
    loadingView={<div>Loading...</div>}
  >
     <Screen
       viewComponent={({ to, name }) => (
         <div>
           <button onClick={e => to('page1', { name: 'two' })}>to page1</button>
         </div>

       )}
       initialProps={ demo: 'demo' }
       name="home"
     />
     <Screen
       viewComponent={({ to, name }) => (
         <div
           style={{ display: 'flex', flexDirection: 'column', width: '400px' }}
         >
           <input
             style={{
               border: '1px solid',
               borderRadius: '5px',
               margin: '10px 0'
             }}
             onChange={({ target }) => to('page1', { name: target.value })}
             placeholder="input name passed to context's viewProps for re-rendering"
           />
           <button onClick={e => to('home', { name: 'Ray' })}>
            {`to home(${name})`}
           </button>
         </div>
       )}
       name="page1"
     />
  </Switch>,
  document.getElementById('app')
);

Or Download the project, using command line:

    npm run example

    yarn example

Properties (Screen)

Properties	Type	Default	Required
name	string		true
viewComponent	React.Component		true
initialProps	Object	{}	false

Properties (Switch)

Properties	Type	Default	Required
children	Screen		true
rootView	string	first-child's name	false
notFoundView	React.Component		false
loadingView	React elements		false

Function and View Props

Screen Component will pass initialProps and to() into viewComponent.

Function Name	Parameter	Action
to	(viewName, viewProps)	Switch to Screen by viewName and override the Component initial props with viewProps

TODO:

• [ ] Complete basic guidelines.
• [ ] More complicated example on Demo website.