☁ realayers
Layer Components for React: Dialogs, Drawers, Tooltips, Menus, Context Menus, Notifications and Popovers
🚀 Quick Links
📦 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!