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