trendingtechnology / react-laag Goto Github PK

View Code? Open in Web Editor NEW

This project forked from everweij/react-laag

0.0 1.0 0.0 1.69 MB

Primitive to build things like tooltips, dropdown menu's and pop-overs in React

Home Page: https://www.react-laag.com

License: MIT License

JavaScript 3.78% TypeScript 96.22%

react-laag's Introduction

Primitive to build things like tooltips, dropdown menu's and pop-overs.

Basically any kind of layer that can be toggled. Focus on what your layer should look like, and let react-laag take care of where and when to show it.

Documentation

Visit the website for more examples and docs here.

Features

Getting started

Installation

npm install --save react-laag

yarn add react-laag

A first component

import React from "react";
import { ToggleLayer, anchor } from "react-laag";

function SimplePopover() {
  return (
    <ToggleLayer
      // provide placement config
      placement={{ anchor: anchor.BOTTOM_CENTER }}
      // render-prop to render our layer
      renderLayer={({ layerProps, isOpen }) =>
        // only render on `isOpen`
        isOpen && (
          <div
            // for calculation stuff
            ref={layerProps.ref}
            style={{
              // inject calculated positional styles
              ...layerProps.style

              // add your own styles
            }}
          />
        )
      }
    >
      {({ toggle, triggerRef }) => (
        <div
          // only the `triggerRef` is required...
          ref={triggerRef}
          // ...the rest is up to you
          onClick={toggle}
          style={{}}
        />
      )}
    </ToggleLayer>
  );
}