🔛Internal Routing Wizard for React
Switch branches/tags
Nothing to show
Clone or download
charliewilco Merge pull request #1 from mlijanto/master
Change Branch to be a generic component
Latest commit b8a2540 Sep 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples solving type issue and adding example Aug 19, 2018
src Change Branch to be a generic component Sep 4, 2018
.gitignore solving type issue and adding example Aug 19, 2018
Readme.md initial commit Jul 30, 2018
package.json adding type declarations Aug 19, 2018
tsconfig.json adding type declarations Aug 19, 2018
yarn.lock solving type issue and adding example Aug 19, 2018

Readme.md

React Branches

Headless Component for tabbed or stepped UI components. Requires React 16+

Install

yarn add @charliewilco/branches

Usage

import React, { Component } from 'react'
import { Trunk, Branch } from '@charliewilco/branches'

const Step = ({ length }) => (
  <div>
     <h1>Step {length} in the Process</h1>
  </div>
)

export const TabbedNavigation = ({ position, goDirectToPosition }) => (
  <nav>
    <button active={position === 0} onClick={() => goDirectToPosition(0)}>
      stop
    </button>
    <button active={position === 1} onClick={() => goDirectToPosition(1)}>
      stop
    </button>
    <button active={position === 2} onClick={() => goDirectToPosition(2)}>
      stop
    </button>
  </nav>
);


export default class Wizard extends Component {
  render() {
    return (
      <Trunk navigation={TabbedNavigation}>
        <Branch component={Step} />
        <Branch component={Step} />
        <Branch component={Step} />
      </Trunk>
    )
  }
}

Components

Trunk

<Trunk /> is the root, it only renders <Branches />

Props:

  • navigation
  • children
  • default position ?

Branch

<Branch />

Props:

  • component
  • render
  • props