WD Tree

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