0.1.0 • Published 5 years ago
react-branches v0.1.0
React Branches
Headless Component for tabbed or stepped UI components. Requires React 16.3+
Install
yarn add react-branches
Usage
import React from "react";
import { Trunk, Branch } from "react-branches";
const Step = ({ length }) => (
<div>
<h1>Step {length} in the Process</h1>
</div>
);
export const TabbedNavigation = ({ position, goDirectToPosition }) => (
<nav>
<button onClick={() => goDirectToPosition(0)}>stop</button>
<button onClick={() => goDirectToPosition(1)}>stop</button>
<button onClick={() => goDirectToPosition(2)}>stop</button>
</nav>
);
export default class Wizard extends React.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
Name | Type | Default | Description |
---|---|---|---|
navigation | React.Component | DefaultNavigation | |
children | React.ReactNode | null |
Branch
<Branch />
Props
Name | Type | Default | Description |
---|---|---|---|
component | React.Component | DefaultNavigation | |
children | React.ReactNode | null | |
render | React.ReactNode | null |
0.1.0
5 years ago