react-overlays-tether

React Overlays Tether

A wrapper for Tether customizable components: tooltip, dropdown and select

dependencies

• Tether (20k)
• Tether Tooltip (1.9k)
• Tether Select (9.5k)
• Tether Drop (8.5k)

Tooltip

Tooltip Usage with attributes:

<TetherTooltip classes="tooltip-theme-twipsy" position="left middle" content="bla bla">
  <button>right center</button>
</TetherTooltip>

Tooltip Usage with options:

getTooltip() {
  return {
    content: 'My awesome <b>content</b>.',
    classes: 'tooltip-theme-arrows',
    position: 'right middle',
  };
}

<TetherTooltip options={this.getTooltip()}>
  <button>Tooltip</button>
</TetherTooltip>

Properties

property	type	description	*
children	any	The trigger element	*
options	object	Tether Tooltip configuration	*
content	any	the content of the tooltip	*
classes	string	Tooltip theme class	*
position	string	Tooltip position	*

• More info about options on Tether website.

---

Popover

<TetherDrop options={this.getPopover()}>
  <button>OPEN Popover</button>
</TetherDrop>

getPopover() {
  return {
    content: '<input type="range" />',
    position: 'right middle',
    classes: 'drop-theme-twipsy',
    // constrainToWindow: true,
    // constrainToScrollParent: false,
    openOn: 'click',
  };
}

Properties

property	type	description	*
children	any	The trigger element	*
options	object	Tether Drop configuration	*

• More info about options on Tether website.

---

Select

Simple Usage

import TetherSelect from 'xyz-components/components/TetherSelect';
import '../css/overlays-select/select-theme-dark.css';

<TetherSelect theme="select-theme-dark">
  <option value="">label A</option>
  <option value="">label B</option>
</TetherSelect>

Dynamic Usage

...
const optionTpl = list.map(function getOptionItem(item, index) {
  return (
     <option value={index} key={'option' + index}>{item.text}</option>
  );
});
...

onSelect(event) {
  console.log (event.target.value)
}

The component also supports any property or method that you usually use with the <select /> element (as shown below).

<TetherSelect theme="select-theme-dark"
              onChange={(event) => this.onSelect(event)}
              value={this.state.index} >
  {optionTpl}
</TetherSelect>

Properties

property	type	description	*
children	any	The trigger element	*
theme	string	Tether Select theme	*
options	object	Tether Drop configuration	*

• More info about options on Tether website.

---

CLI: run, build, test, lint

Build component

1. npm install
2. npm start

Run demo

1. Go to ./demo folder
2. npm install
3. npm start
4. browse http://localhost:3000

Build the demo (distribution)

1. Go to ./demo folder
2. npm install
3. npm run start:umd
4. browse http://localhost:8080

Run Test

This components uses AVA, Airbnb Enzyne, JSDOM, react-addons-test-utils and many other tools (see package.json for the whole list).

1. Go the project root folder
2. npm install
3. npm run test

NOTE: The environment is ready but there are still no tests)

Lint

1. Go the project root folder
2. npm run lint

---

Authors and Contributors

• Fabio Biondi - Author
• Unshift

Based on library-boilerplate by Dan Abramov