SleepWalker / realayers

☁ Layer Components - Dialogs, Drawers, Tooltips, Popovers

☁ realayers

Layer Components for React: Dialogs, Drawers, Tooltips and Popovers

---

🚀 Quick Links

• Checkout the demos

📦 Usage

Install the package via NPM:

yarn add realayers

Tooltip

import React, { FC } from 'react';
import { Tooltip } from 'realayers';

const MyComponent: FC = () => (
  <Tooltip content="Hi there">Hover me</Tooltip>
);

Popover

import React, { FC } from 'react';
import { Popover } from 'realayers';

const MyComponent: FC = () => (
  <Popover
    content={
      <div style={{ textAlign: 'center'}}>
        <h1>WHATS UP????!</h1>
        <button type="button">Click me</button>
      </div>
    }
  >
    Click me
  </Popover>
);

Dialog

import React, { FC } from 'react';
import { useDialog } from 'realayers';

export const Simple = () => {
  const { toggleOpen, Dialog } = useDialog();

  return (
    <div>
      <button onClick={toggleOpen}>Open</button>
      <Dialog header="Whats up">
        Hello
      </Dialog>
    </div>
  );
};

Drawer

import React, { FC } from 'react';
import { useDrawer } from 'realayers';

export const Simple = () => {
  const { toggleOpen, Drawer } = useDrawer();

  return (
    <div>
      <button onClick={toggleOpen}>Open</button>
      <Drawer>
        Hello
      </Drawer>
    </div>
  );
};

🔭 CSS Variables

Add the following CSS variables to your application's body.

body {
  --color-popover: rgb(0, 0, 0, .8);
  --color-on-popover: white;
  
  --color-tooltip: rgb(0, 0, 0, .8);
  --color-on-tooltip: white;

  --color-dialog: #2c2c35;
  --color-on-dialog: #fff;

  --color-drawer: #2c2c35;
  --color-on-drawer: #fff;

  --color-layer-transparent: rgba(5, 6, 12, 0.9);
}