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