0.1.0 • Published 4 years ago
@barusu-react/octotree v0.1.0
Render a simple directory tree similar to octotree, but really more coarse.
See sourcecodes in github to for details.
Install
npm
npm install --save @barusu-react/octotree
yarn
yarn add @barusu-react/octotree
Usage
You should import the octotree.woff2 font manually.
@font-face {
src: url('/font/octotree.woff2') format('woff2');
font-family: 'octotree';
}
Use in React project
Pure
import React from 'react' import { BrowserRouter as Router } from 'react-router-dom' import Octotree, { resolveOctotreeData } from '@barusu-react/octotree' 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> <Octotree nodes={ data } iconWidth="1.5rem" 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 Octotree, { resolveOctotreeData } from '@barusu-react/octotree' 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 = { octotree: { fontSize: '18px', colorTitle: '#ccc', linkBackgroundHover: 'red', linkBackgroundActive: 'blue', typeIconColorSecondary: 'green' } }} const wrapper = ( <ThemeProvider theme={ theme }> <Router> <Octotree nodes={ data } iconWidth="1.5rem" 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 iconWidth
string
false
1.25rem
Icon width OctotreeProps inherited all attributes of
HTMLDivElement
(React.HTMLAttributes<HTMLDivElement>
)Theme
Prop Name Default fontSize 1rem
colorTitle #0f2e47
linkBackgroundHover #f6f8fa
linkBackgroundActive #dbeeff
typeIconColorPrimary #6cb5fe
typeIconColorSecondary #8a8a8a
See OctotreeTheme for details.