react-a-gate v1.5.1

react-a-gate

Overview

react-a-gate is a React library for modals, tooltips and popovers. It uses the new React feature called Portals. Basically, a portal (ehem... a gate) allows you to render an element of a child component outside the DOM hierarchy by creating another top-level tree and injecting this component inside it.

Demo

If you want to see the library in action, here are some live demos.

Requirements

• node 12.xx.x
• npm 6.x.x

Installation

npm install react-a-gate

or

yarn add react-a-gate

Usage

Modal

1 . Import ModalGate after the installation.

import { ModalGate } from 'react-a-gate';

2 . Add the ModalGate component into your JSX code.

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <>
      <button className="App-button" onClick={openModal}>
        Open modal
      </button>
      <ModalGate id="app_modal" isOpen={isOpen} onClose={closeModal}>
        <>
          <div>This is a modal</div>
          <button className="App-button" onClick={closeModal}>
            Close modal
          </button>
        </>
      </ModalGate>
    </>
  );
};

You can also use a custom React component to be rendered inside the modal, like the example below:

const Text = () => <div>This is some text</div>;

const App = () => {
  // ...
  <ModalGate id="app_modal" isOpen={isOpen} onClose={closeModal}>
    <Text />
  </ModalGate>;
  // ...
};

Props

Tooltip

1 . Import TooltipGate after the installation.

import { TooltipGate } from 'react-a-gate';

2 . Add the TooltipGate component into your JSX code.

const App = () => (
  <TooltipGate content="This is some text" place="top">
    <button className="App-button">Hover me</button>
  </TooltipGate>
);

You can also use a custom React component to be rendered inside the tooltip, like the example below:

const Text = () => <div>This is some text</div>;

const App = () => {
  <TooltipGate content={<Text />} place="top">
    <button className="App-button">Hover me</button>
  </TooltipGate>;
};

Props

Popover

1 . Import PopoverGate after the installation.

import { PopoverGate } from 'react-a-gate';

2 . Add the PopoverGate component into your JSX code.

const App = () => (
  <PopoverGate content="This is some text" place="top">
    <button className="App-button">Click me</button>
  </PopoverGate>
);

You can also use a custom React component to be rendered inside the popover, like the example below:

const Text = () => <div>This is some text</div>;

const App = () => {
  <PopoverGate content={<Text />} place="top">
    <button className="App-button">Click me</button>
  </PopoverGate>;
};

Props

How to override CSS styles

Each component has a few styles by default. In case you want to override them, here are the main classes you need to override on your project:

Modal

modal__backdrop
  >  modal__content
modal__backdrop--active
  >  modal__content

Tooltip

tooltip__container
tooltip__arrow
tooltip__arrow-border
tooltip__inner

In case you want to customize the colors of the tooltip, here's an example of what you need to do:

.red {
  .tooltip__inner {
    background-color: #ac2121;
    border: 1px solid #700404;
  }

  .tooltip__arrow {
    border-color: #ac2121;
  }

  .tooltip__arrow-border {
    border-color: #700404;
  }
}

<TooltipGate content="This is some text" className="red">
  <button className="App-button">Hover me</button>
</TooltipGate>

Popover

popover__container
popover__arrow
popover__arrow-border
popover__inner

In case you want to customize the colors of the popover, here's an example of what you need to do:

.red {
  .popover__inner {
    background-color: #ac2121;
    border: 1px solid #700404;
  }

  .popover__arrow {
    border-color: #ac2121;
  }

  .popover__arrow-border {
    border-color: #700404;
  }
}

<PopoverGate content="This is some text" className="red">
  <button className="App-button">Click me</button>
</PopoverGate>