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