@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.