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.