react-overlay-pack

Reusable components to build Tooltip, Popover and Dialog.

Installation

$ yarn add react-overlay-pack

Demo

• https://react-overlay-pack.netlify.com/

Usage

ClickOutside

import { ClickOutside } from 'react-overlay-pack';

<ClickOutside onClick={e => console.log(e)}>
  <div>content</div>
</ClickOutside>;

type Props = {
  children: React.Node,
  onClick: (e: any) => void,
};

DomAlign

import { DomAlign } from 'react-overlay-pack';

<div ref={this.target}>
  Target node
</div>

<DomAlign
  config={{ points: ['bl', 'tc'], offset: [5, 0] }}
  target={this.target}
  resize
>
  <div>
    Align node
  </div>
</DomAlign>

type Props = {
  children: React.Element<any>,
  config: Object,
  target: React.ElementRef<any>,
  resize?: boolean,
};

• config: https://github.com/yiminghe/dom-align#config-object-details

Overlay

import { Overlay } from 'react-overlay-pack';

<span ref={this.target} onClick={() => this.setState({ show: true })}>
  Target node
</span>;

<Overlay
  show={this.state.show}
  target={this.target}
  onOutsideClick={() => this.setState({ show: false })}
  resize
  alignConfig={{ points: ['tr', 'br'], targetOffset: [0, 8] }}
  transitionConfig={{
    style: { transform: 'translateY(-8px)' }, // From
    animation: { translateY: 0 }, // To
  }}
>
  <div key="div">This is overlay content.</div>
</Overlay>;

type Props = {
  show: boolean,
  children: any,
  onOutsideClick?: (e: any) => void,
  target?: React.ElementRef<any>,
  alignConfig: Object,
  transitionConfig?: Object,
  resize?: boolean,
};

• alignConfig: https://github.com/yiminghe/dom-align#config-object-details
• transitionConfig: https://github.com/react-component/tween-one

Dialog

import { Dialog } from 'react-overlay-pack';

<Dialog
  show={this.state.show}
  onOutsideClick={() => this.setState({ show: false })}
>
  <div key="div">This is content.</div>
</Dialog>;

type Props = {
  show: boolean,
  children: React.Node,
  onOutsideClick: Function,
  backdropTransition?: Object,
  containerTransition?: Object,
};

• backdropTransition: https://github.com/react-component/tween-one
• containerTransition: https://github.com/react-component/tween-one

Portal

Transition

Inspiration

• https://github.com/react-bootstrap/react-overlays

Development

Requirements

• node >= 11.6.0
• yarn >= 1.12.3
• react >= 16

$ yarn install --pure-lockfile
$ yarn start

Test

$ yarn run format
$ yarn run eslint
$ yarn run flow
$ yarn run test:watch
$ yarn run build

Publish

$ npm version patch
$ npm run changelog
git commit & push

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests.

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org