dialogs

Reusable components to build Tooltip and Dialog

Dec 20, 2018
Reusable components to build Tooltip and Dialog

react-overlay-pack

Reusable components to build Tooltip, Popover and Dialog.

View demo Download Source

Installation

$ yarn add react-overlay-pack

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, };

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, };

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, };

Portal

Transition

Inspiration

Development

Requirements

  • node >= 11.4.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

GitHub

😢
No results! Please try a different combination of filters.
Recommended