0.1.0 • Published 4 years ago

@barusu-react/octotree v0.1.0

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

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

    NameTypeRequiredDefaultDescription
    refReact.RefObject<HTMLDivElement>false-Forwarded ref callback
    nodesOctotreeNodeData[]true-Node data of octotree
    iconWidthstringfalse1.25remIcon width

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

  • Theme

    Prop NameDefault
    fontSize1rem
    colorTitle#0f2e47
    linkBackgroundHover#f6f8fa
    linkBackgroundActive#dbeeff
    typeIconColorPrimary#6cb5fe
    typeIconColorSecondary#8a8a8a

    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

0.0.16

5 years ago