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.