0.1.0 • Published 4 years ago

@barusu-react/octotree-sidebar v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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

    NameTypeRequiredDefaultDescription
    refReact.RefObject<HTMLDivElement>false-Forwarded ref callback
    nodesOctotreeNodeData[]true-Node data of octotree
    defaultPinedbooleanfalsefalseInitial sidebar pined state
    defaultWidthnumberfalse200Initial sidebar width

    OctotreeSidebarProps inherited all attributes of HTMLDivElement (React.HTMLAttributes<HTMLDivElement>)

  • Theme

    Prop NameDefault
    borderRight1px solid #dfe2e5
    headerBackground#373e43
    mainBackground#fff
    toggleBackground#f2f5f7
    toggleBorderColor#e0e4e7

    See OctotreeTheme for details.

0.1.0

4 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago