Skip to content

batyshkaLenin/tree-lib

Repository files navigation

WD Tree

Node CI Maintainability

React component tree library

Getting started

npm install - install dependencies
npm start - start project

Basic usage tree component:

import React, { useEffect, useState } from 'react'
import axios, { AxiosResponse } from 'axios'
import { Tree, TreeType, TreeHelper } from 'wd-tree'

function App() {
  const [tree, setTree] = useState<TreeType>()
  const [currentId, setCurrentId] = useState<string>('')
  const [helper, setHelper] = useState<TreeHelper>()

  useEffect(() => {
    axios.get('testData.json').then((res: AxiosResponse<TreeType>) => {
      setTree(res.data)
      const treeHelper = new TreeHelper(res.data)
      setHelper(treeHelper)
      setCurrentId(treeHelper.getIdByURL() || '')
    })
  }, [])

  const selectPage = (id: string) => {
    setCurrentId(id)
    window.history.pushState({}, '', helper?.getUrlById(id) || '')
  }

  return <Tree data={tree} active={currentId} onSelect={selectPage} />
}

The component also has the following properties API:

  • isLoading - status of loading for component
  • topLevelIds - array of top-level ids for rendering tree
  • className - classNames for styling tree

Plans for implementation

  • Tree MVP
  • API for choosing link render component
  • Standalone npm package
  • Storybook

Useful features for development

  • Prettier. Formats your code according to the rules in .prettierc. In WebStorm keyboard shortcut Alt+Shift+Ctrl+P.
  • Husky. Hook before committing. If you forgot to format your code, then Husky will launch the Prettier before committing.

Deploy

Autodeploy on Vercel: tree-lib.vercel.app