0.1.0 • Published 4 years ago
@barusu-react/octotree-sidebar v0.1.0
Render a simple directory tree similar to octotree-sidebar, but really more coarse.
See sourcecodes in github to for details.
Install
npm
npm install --save @barusu-react/octotree-sidebar
yarn
yarn add @barusu-react/octotree-sidebar
Usage
You should import the octotree-sidebar.woff2 font manually.
@font-face {
src: url('/font/octotree-sidebar.woff2') format('woff2');
font-family: 'octotree-sidebar';
}
Use in React project
Pure
import React from 'react' import { BrowserRouter as Router } from 'react-router-dom' import { resolveOctotreeData } from '@barusu-react/octotree' import OctotreeSidebar from '@barusu-react/octotree-sidebar' const data = resolveOctotreeData([ { title: 'hooks', children: [ { title: 'demo', pathname: '/hooks/demo', children: [{ title: '2', pathname: '/hooks/demo/2' }] }, { title: 'ref', pathname: '/hooks/ref' } ] }, { title: 'context', pathname: '/context' }, { title: 'demo', pathname: '/demo' }, ]) const wrapper = ( <Router> <OctotreeSidebar nodes={ data } defaultPined={ true } defaultWidth={ 250 } style={{ color: 'orange', fontSize: '16px' }} /> </Router> )
With theme
import React from 'react' import { BrowserRouter as Router } from 'react-router-dom' import { DefaultTheme, ThemeProvider } from 'styled-components' import { resolveOctotreeData } from '@barusu-react/octotree' import OctotreeSidebar from '@barusu-react/octotree-sidebar' const data = resolveOctotreeData([ { title: 'hooks', children: [ { title: 'demo', pathname: '/hooks/demo', children: [{ title: '2', pathname: '/hooks/demo/2' }] }, { title: 'ref', pathname: '/hooks/ref' } ] }, { title: 'context', pathname: '/context' }, { title: 'demo', pathname: '/demo' }, ]) const theme: DefaultTheme = { octotreeSidebar: { borderRight: 'none', headerBackground: 'red', // mainBackground: '#fff', toggleBackground: 'blue', toggleBorderColor: 'green', } } const wrapper = ( <ThemeProvider theme={ theme }> <Router> <OctotreeSidebar nodes={ data } defaultWidth={ 250 } style={{ color: 'orange', fontSize: '16px' }} /> </Router> </ThemeProvider> )
Props
Name Type Required Default Description ref
React.RefObject<HTMLDivElement>
false
- Forwarded ref callback nodes
OctotreeNodeData[]
true
- Node data of octotree defaultPined
boolean
false
false
Initial sidebar pined state defaultWidth
number
false
200
Initial sidebar width OctotreeSidebarProps inherited all attributes of
HTMLDivElement
(React.HTMLAttributes<HTMLDivElement>
)Theme
Prop Name Default borderRight 1px solid #dfe2e5
headerBackground #373e43
mainBackground #fff
toggleBackground #f2f5f7
toggleBorderColor #e0e4e7
See OctotreeTheme for details.