Components.story.mdx

import { Meta } from '@storybook/addon-docs/blocks';

Components

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