Nearly Picked Makefiles

    realayers
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.4 • Public • Published

    realayers


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

    Open Collective backers and sponsors

    🚀 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!

    Install

    npm i realayers

    DownloadsWeekly Downloads

    2,963

    Version

    3.0.4

    License

    Apache-2.0

    Unpacked Size

    166 kB

    Total Files

    50

    Last publish

    Collaborators

    • amcdnl