react-finderjs

React componet wrapper for https://mynameistechno.github.io/finderjs/ javascript component

Installation

npm install --save react-finderjs

Usage

import * as ReactFinder from "react-finderjs";

const data = [
  {
    id: 1,
    label: 'Label A'
    children: [
      {
        id: 10,
        label: 'Label A1'
      },
      {
        id: 11,
        label: 'Label A2'
      }
    ]
  }, {
    id: 2,
    label: 'Label B'
  }
];

<ReactFinder
  className = ""
  data = {data} />

Parameter	Type	Description
className	string	Custom class name for the wrapping div
createItemContent	Function	Define how each item is rendered. Parameters (config, item). The first parameter passed in is the config object and the second is the item object that is currently being iterated on. It should return an HTML Element.
data	Array	Data source is a array of objects
disableAutoScroll	Boolean	Disable automatically scrolling to newly created column on parent click (default: false)
onItemSelected	Function	Callback function when item selected. Parameters: (item, domItem)
onLeafSelected	Function	Callback function when leaf node selected. Parameters: (item)
onColumnCreated	Function	Callback function when column is created. Parameters: (domColumn)
value	Object	Currently selected value. The id property is required for data lookup.

Data

Each item in the array itself should be an object. Each object that doesn't contain a children property is considered a leaf node. When a leaf node is selected, the onLeafSelected event will be emitted. When present, the value of the children property should be an array. When a node has children and it is selected, it will use the children to populate the next column.

Notes

If an object has a url property it will be treated slightly differently: the anchor tag that wraps the item will have the href attribute assigned to it. Upon selection of this item the browser will be redirected to the provided URL.

Events

react-finderjs has a few events you can provide callbacks for, as well as some public methods to trigger events in the native finderjs library:

Property Callback	Description
onItemSelected	An item was selected (clicked or keyboard arrow)
onLeafSelected	A leaf node was selected
onColumnCreated	A column was appended to the container

Public Event	Description
createColumn	Append a column to the container
navigate	Navigate the finder by going up, down, right, or left

Project commands

Command	Description
npm run build	Build /dist finderjs
npm run clean	Deletes /dist folder for build
npm run publish	Run clean & build commands
npm run test	Run test (not completed)
npm run watch	Run watch for file changes