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

Property	Type	Default	Description
id	String	-	Identificator for the modal. Required.
rootId	String	portal-root	Identificator for the portal. If you already have a different root included in your HTML code, just put here the element id. If not, a new one will be created.
className	String	-	Property used to override the default CSS styles with custom ones.
isOpen	Boolean	false	Property used to show and hide the modal. Required.
closeWhenClickOutside	Boolean	true	Enable or disable the closing of the modal when the user clicks outside.
onClose	Function	-	Function that triggers the closing of the modal. It is used to close the modal when the user clicks outside the modal and when the user pressed the Escape key. Required.

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

Property	Type	Default	Description
rootId	String	'portal-root'	Identificator for the portal. If you already have a different root included in your HTML code, just put here the element id. If not, a new one will be created.
className	String	-	Property used to override the default CSS styles with custom ones. It also overrides the current selected theme.
content	String / JSX Element	-	Content that will be rendered inside the tooltip. It can be a simple string or a custom React component. Required.
place	String	top	Property to set where the tooltip will be placed. Accepted values: top, bottom, left and right.
theme	String	dark	Property to set an already defined theme. Accepted values: light and dark.
offset	Number	10	Distance between the trigger element and the tooltip.
children	ReactNode	-	The trigger element. It can be an HTMLElement or any custom React component. Required.

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

Property	Type	Default	Description
rootId	String	'portal-root'	Identificator for the portal. If you already have a different root included in your HTML code, just put here the element id. If not, a new one will be created.
className	String	-	Property used to override the default CSS styles with custom ones.
content	String / JSX Element	-	Content that will be rendered inside the popover. It can be a simple string or a custom React component. Required.
place	String	top	Property to set where the popover will be placed. Accepted values: top, bottom, left and right.
mode	String	click	Property to set the mode of the popover. 'click' mode will open and close the popover when the user clicks at the trigger element, and the 'hover' mode will open and close the popover when the user hovers in and out the trigger element. Accepted values: click and hover.
closeWhenClickOutside	Boolean	true	Enable or disable the closing of the popover when the user clicks outside.
theme	String	dark	Property to set an already defined theme. Accepted values: light and dark.
offset	Number	10	Distance between the trigger element and the popover.
children	ReactNode	-	The trigger element. It can be an HTMLElement or any custom React component. Required.

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>