☁ realayers


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

Open Collective backers and sponsors
--- ## 🚀 Quick Links - Checkout the [demos](https://master--5f64a424915bb90022b5d92a.chromatic.com) - View the library on [Chromatic](https://chromatic.com/library?appId=5f64a424915bb90022b5d92a&branch=master) - Learn about updates from the [changelog](CHANGELOG.md) ## 📦 Usage Install the package via NPM: ``` npm i realayers --s ``` -or- ``` yarn add realayers ``` ### Tooltip ```tsx import React, { FC } from 'react'; import { Tooltip } from 'realayers'; const MyComponent: FC = () => ( Hover me ); ``` ### Popover ```tsx import React, { FC } from 'react'; import { Popover } from 'realayers'; const MyComponent: FC = () => (

WHATS UP????!

} > Click me ); ``` ### Dialog ```tsx import React, { FC } from 'react'; import { useDialog } from 'realayers'; export const Simple = () => { const { toggleOpen, Dialog } = useDialog(); return (
Hello
); }; ``` ### Drawer ```tsx import React, { FC } from 'react'; import { useDrawer } from 'realayers'; export const Simple = () => { const { toggleOpen, Drawer } = useDrawer(); return (
Hello
); }; ``` ### Menu ```tsx import React, { FC } from 'react'; import { useMenu } from 'realayers'; export const Simple = () => { const { toggleOpen, ref, Menu } = useMenu(); return (
Hello
); }; ``` ### ContextMenu ```tsx import React, { FC } from 'react'; import { ContextMenu } from 'realayers'; export const Simple = () => ( something cool here } > ); ``` ### Notifications ```tsx import React, { FC } from 'react'; import { Notifications, useNotification } from 'realayers'; export const App = () => ( ); export const YourComponent = () => { const { notify } = useNotification(); return ( ); }; ``` ## 🎨 CSS Variables Add the following CSS variables to your application's body. ```css 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!