schwers-zz/r-widgets

A collection of React components and the Redux actions and reducers to accompany them

r/widgets

A collection of helpful React components that can be used without much effort in a React + Redux environment

Installation

To install, use npm:

npm install -S @r/widgets

You'll also need to install the peer dependencies. Ex:

npm install -S lodash@4 react@15 react-redux@4 redux@3 reselect@2

Usage

Tooltip

First, plug in the reducer. Be sure that the reducer is named widgets in the store.

import { reducer as widgets } from '@r/widgets/reducer';
import { combineReducers } from 'redux';

const reducers = combineReducers({
  widgets,
  /* other reducers */
});

Create a tooltip and give it a target. Both the target and the tooltip must have the same id.

import React from 'react';
import { Tooltip } from '@r/widgets/tooltip';

class Foo extends React.Component {
  render() {
    return (
      <div>
        <div>
          <Target id='test tooltip'>Mouse over me!</Target>
        </div>
        <Tooltip
          id='test tooltip'
          alignment={Tooltip.ALIGN.ABOVE}
        >
          Hello!
        </Tooltip>
      </div>
    );
  }
}

And that's it! Tooltip and Target also come with a few configuration options:

Tooltip

0. alignment: One of Tooltip.ALIGN.ABOVE, Tooltip.ALIGN.BELOW, Tooltip.ALIGN.LEFT, Tooltip.ALIGN.RIGHT
1. offset: Number of pixels the tooltip should be separated from the target when shown.

Target

0. type: Indicates what kind of action will trigger the tooltip. One of Target.TYPE.HOVER, Target.TYPE.CLICK, or Target.TYPE.BOTH.