react-treeselectjs v0.4.1

Treeselect JS React component

It is a wrapper for https://www.npmjs.com/package/treeselectjs

A multi-select js component with nested options.

• Full key support (ArrowUp, ArrowDown, Space, ArrowLeft, ArrowRight, Enter)
• Screen sensitive direction
• Typescript support

Build data:

• react-treeselectjs.mjs 23.26 kB │ gzip: 6.98 kB
• react-treeselectjs.umd.js 15.43 kB │ gzip: 5.98 kB
• react-treeselectjs.css 6.93 kB │ gzip: 1.38 kB

Live Demo: https://dipson88.github.io/treeselectjs/

Getting Started

npm install --save react-treeselectjs

Import react-treeselectjs (ES)

import Treeselect from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-treeselectjs.css'

Import treeselectjs (UMD)

<script src="https://cdn.jsdelivr.net/npm/react-treeselectjs@0.4.1/dist/react-treeselectjs.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/react-treeselectjs@0.4.1/dist/react-treeselectjs.css" />

All Available Imports

import Treeselect, { DirectionType, IconsType, OptionType, TreeselectProps, TreeselectValue } from 'react-treeselectjs'

Example

import React, { useCallback } from 'react'
import Treeselect, { TreeselectValue } from 'react-treeselectjs'
import 'react-treeselectjs/dist/react-treeselectjs.css'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          {
            name: 'Chelsea',
            value: 3,
            children: []
          },
          {
            name: 'West End',
            value: 4,
            children: []
          }
        ]
      },
      {
        name: 'Brighton',
        value: 5,
        children: []
      }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      {
        name: 'Paris',
        value: 7,
        children: []
      },
      {
        name: 'Lyon',
        value: 8,
        children: []
      }
    ]
  }
]

function App() {
  // Also for value type, you can use value: string | number | (string | number)[] | null | undefined
  const onInput = useCallback((value: TreeselectValue) => {
    console.log('onInput', value)
  }, [])

  return (
    <div>
      <Treeselect
        options={options}
        value={[4, 7, 8]}
        onInput={onInput}
      >
        {/* Use slot if you need */}
        <a className="treeselect-demo__slot" href="">Click!</a>'
      </Treeselect>
    </div>
  )
}

export default App

Props

Core props

List settings props

Input settings props

Callback props

Additional props

Option description

Is is description of the one option of the options prop: Name | Type | Description ------------- | ------------- | ------------- value | String | Number (required!) | It is a value of the node. It should be unique! name | String (required!) | It is the name of the node. Can be duplicated. disabled | Boolean (optional) | The node will be disabled. It is an optional field, you can skip it if no need to work with disabled values. htmlAttr | Object (optional) | The object of the HTML attributes, the value of the object should be a String type. These attributes will be merged into the node HTML tag. children | {name: String, value: String, disabled?: Boolean, htmlAttr?: object, children: [] }[] | Children are the same array of objects.

Notes

1) If you want to change the padding of the element you can use CSS selector. I've added 'group' and 'level' attributes, but you have to use !important. 2) Do not use duplicated values for the options. You will see a error with duplicated values. But you can use duplicated names. 3) Value prop inside the options prop should be a String or Number. 4) If you use isSingleSelect prop, you should pass only a single value without an array. 5) If you use isSingleSelect prop, you can set showTags to false. It helps to show treeselect as a dropdown. Also you can disable selecting of group's nodes with help of disabledBranchNode.

Support

You can buy me a coffee if you want to support my work. Thank you!