realayers

☁ realayers

Layer Components for React: Dialogs, Drawers, Tooltips, Menus, Context Menus, Notifications and Popovers

🚀 Quick Links

• Checkout the demos
• View the library on Chromatic
• Learn about updates from the changelog

📦 Usage

Install the package via NPM:

npm i realayers --s

-or-

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

Menu

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

export const Simple = () => {
  const { toggleOpen, ref, Menu } = useMenu();

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

ContextMenu

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

export const Simple = () => (
  <ContextMenu
    content={
      <div style={{ padding: 20 }}>
        something cool here
      </div>
    }
  >
    <button>👋 right click me</button>
  </ContextMenu>
);

Notifications

import React, { FC } from 'react';
import { Notifications, useNotification } from 'realayers';

export const App = () => (
  <Notifications>
    <YourComponent />
  </Notifications>
);

export const YourComponent = () => {
  const { notify } = useNotification();

  return (
    <button onClick={() => notify('Something good happened!')}>
      Notify
    </button>
  );
};

🎨 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-notification: rgb(9, 9, 10, 0.9);
  --color-on-notification: #fff;
  --color-notification-border: transparent;
  --color-notification-error: red;
  --color-notification-warning: yellow;
  --color-notification-success: green;

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

🔭 Development

If you want to run realayers locally, its super easy!

• Clone the repo
• yarn install
• yarn start
• Browser opens to Storybook page

❤️ Contributors

Thanks to all our contributors!