1 | # react-a-gate
|
2 |
|
3 | [![version](https://img.shields.io/npm/v/react-a-gate.svg)](https://www.npmjs.com/package/react-a-gate)
|
4 | [![install-size](https://packagephobia.now.sh/badge?p=react-a-gate)](https://packagephobia.now.sh/result?p=react-a-gate)
|
5 | [![license](https://img.shields.io/npm/l/react-a-gate.svg)](https://github.com/bonavida/react-a-gate/blob/master/LICENSE)
|
6 |
|
7 | ## Overview
|
8 |
|
9 | `react-a-gate` is a React library for modals, tooltips and popovers. It uses the new React feature called [Portals](https://reactjs.org/docs/portals.html). 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.
|
10 |
|
11 | ## Requirements
|
12 |
|
13 | - node 12.xx.x
|
14 | - npm 6.x.x
|
15 |
|
16 | ## Installation
|
17 |
|
18 | ```sh
|
19 | npm install react-a-gate
|
20 | ```
|
21 |
|
22 | or
|
23 |
|
24 | ```sh
|
25 | yarn add react-a-gate
|
26 | ```
|
27 |
|
28 | ## Usage
|
29 |
|
30 | ### Modal
|
31 |
|
32 | 1 . Import `ModalGate` after the installation.
|
33 |
|
34 | ```js
|
35 | import { ModalGate } from 'react-a-gate';
|
36 | ```
|
37 |
|
38 | 2 . Add the ModalGate component into your JSX code.
|
39 |
|
40 | ```js
|
41 | const App = () => {
|
42 | const [isOpen, setIsOpen] = useState(false);
|
43 |
|
44 | const openModal = () => setIsOpen(true);
|
45 | const closeModal = () => setIsOpen(false);
|
46 |
|
47 | return (
|
48 | <>
|
49 | <button className="App-button" onClick={openModal}>
|
50 | Open modal
|
51 | </button>
|
52 | <ModalGate id="app_modal" isOpen={isOpen} onClose={closeModal}>
|
53 | <>
|
54 | <div>This is a modal</div>
|
55 | <button className="App-button" onClick={closeModal}>
|
56 | Close modal
|
57 | </button>
|
58 | </>
|
59 | </ModalGate>
|
60 | </>
|
61 | );
|
62 | };
|
63 | ```
|
64 |
|
65 | You can also use a custom React component to be rendered inside the modal, like the example below:
|
66 |
|
67 | ```js
|
68 | const Text = () => <div>This is some text</div>;
|
69 |
|
70 | const App = () => {
|
71 | // ...
|
72 | <ModalGate id="app_modal" isOpen={isOpen} onClose={closeModal}>
|
73 | <Text />
|
74 | </ModalGate>;
|
75 | // ...
|
76 | };
|
77 | ```
|
78 |
|
79 | #### Props
|
80 |
|
81 | | Property | Type | Default | Description |
|
82 | | --------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
83 | | id | String | - | Identificator for the modal.<br>_Required_. |
|
84 | | 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. |
|
85 | | isOpen | Boolean | `false` | Property used to show and hide the modal.<br>_Required_. |
|
86 | | closeWhenClickOutside | Boolean | `true` | Enable or disable the closing of the modal when the user clicks outside. |
|
87 | | 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.<br>_Required_. |
|
88 |
|
89 | ### Tooltip
|
90 |
|
91 | 1 . Import `TooltipGate` after the installation.
|
92 |
|
93 | ```js
|
94 | import { TooltipGate } from 'react-a-gate';
|
95 | ```
|
96 |
|
97 | 2 . Add the TooltipGate component into your JSX code.
|
98 |
|
99 | ```js
|
100 | const App = () => (
|
101 | <TooltipGate content="This is some text" place="top">
|
102 | <button className="App-button">Hover me</button>
|
103 | </TooltipGate>
|
104 | );
|
105 | ```
|
106 |
|
107 | You can also use a custom React component to be rendered inside the tooltip, like the example below:
|
108 |
|
109 | ```js
|
110 | const Text = () => <div>This is some text</div>;
|
111 |
|
112 | const App = () => {
|
113 | <TooltipGate content={<Text />} place="top">
|
114 | <button className="App-button">Hover me</button>
|
115 | </TooltipGate>;
|
116 | };
|
117 | ```
|
118 |
|
119 | #### Props
|
120 |
|
121 | | Property | Type | Default | Description |
|
122 | | --------- | -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
123 | | 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. |
|
124 | | className | String | - | Property used to override the default CSS styles with custom ones. It also overrides the current selected theme. |
|
125 | | content | String / JSX Element | - | Content that will be rendered inside the tooltip. It can be a simple string or a custom React component.<br>_Required_. |
|
126 | | place | String | `top` | Property to set where the tooltip will be placed.<br>**Accepted values:** `top`, `bottom`, `left` and `right`. |
|
127 | | theme | String | `dark` | Property to set an already defined theme.<br>**Accepted values:** `light` and `dark`. |
|
128 | | offset | Number | `10` | Distance between the trigger element and the tooltip. |
|
129 | | children | ReactNode | - | The trigger element. It can be an HTMLElement or any custom React component. <br>_Required_. | |
|
130 |
|
131 | ### Popover
|
132 |
|
133 | 1 . Import `PopoverGate` after the installation.
|
134 |
|
135 | ```js
|
136 | import { PopoverGate } from 'react-a-gate';
|
137 | ```
|
138 |
|
139 | 2 . Add the PopoverGate component into your JSX code.
|
140 |
|
141 | ```js
|
142 | const App = () => (
|
143 | <PopoverGate content="This is some text" place="top">
|
144 | <button className="App-button">Click me</button>
|
145 | </PopoverGate>
|
146 | );
|
147 | ```
|
148 |
|
149 | You can also use a custom React component to be rendered inside the popover, like the example below:
|
150 |
|
151 | ```js
|
152 | const Text = () => <div>This is some text</div>;
|
153 |
|
154 | const App = () => {
|
155 | <PopoverGate content={<Text />} place="top">
|
156 | <button className="App-button">Click me</button>
|
157 | </PopoverGate>;
|
158 | };
|
159 | ```
|
160 |
|
161 | #### Props
|
162 |
|
163 | | Property | Type | Default | Description |
|
164 | | --------------------- | -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
165 | | 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. |
|
166 | | className | String | - | Property used to override the default CSS styles with custom ones. |
|
167 | | content | String / JSX Element | - | Content that will be rendered inside the popover. It can be a simple string or a custom React component.<br>_Required_. |
|
168 | | place | String | `top` | Property to set where the popover will be placed.<br>**Accepted values:** `top`, `bottom`, `left` and `right`. |
|
169 | | 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.<br>**Accepted values:** `click` and `hover`. |
|
170 | | closeWhenClickOutside | Boolean | `true` | Enable or disable the closing of the popover when the user clicks outside. |
|
171 | | theme | String | `dark` | Property to set an already defined theme.<br>**Accepted values:** `light` and `dark`. |
|
172 | | offset | Number | `10` | Distance between the trigger element and the popover. |
|
173 | | children | ReactNode | - | The trigger element. It can be an HTMLElement or any custom React component. <br>_Required_. |
|
174 |
|
175 | ### How to override CSS styles
|
176 |
|
177 | 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:
|
178 |
|
179 | #### Modal
|
180 |
|
181 | ```
|
182 | modal__backdrop
|
183 | > modal__content
|
184 | modal__backdrop--active
|
185 | > modal__content
|
186 | ```
|
187 |
|
188 | #### Tooltip
|
189 |
|
190 | ```
|
191 | tooltip__container
|
192 | tooltip__arrow
|
193 | tooltip__arrow-border
|
194 | tooltip__inner
|
195 | ```
|
196 |
|
197 | In case you want to customize the colors of the tooltip, here's an example of what you need to do:
|
198 |
|
199 | ```scss
|
200 | .red {
|
201 | .tooltip__inner {
|
202 | background-color: #ac2121;
|
203 | border: 1px solid #700404;
|
204 | }
|
205 |
|
206 | .tooltip__arrow {
|
207 | border-color: #ac2121;
|
208 | }
|
209 |
|
210 | .tooltip__arrow-border {
|
211 | border-color: #700404;
|
212 | }
|
213 | }
|
214 | ```
|
215 |
|
216 | ```jsx
|
217 | <TooltipGate content="This is some text" className="red">
|
218 | <button className="App-button">Hover me</button>
|
219 | </TooltipGate>
|
220 | ```
|
221 |
|
222 | #### Popover
|
223 |
|
224 | ```
|
225 | popover__container
|
226 | popover__arrow
|
227 | popover__arrow-border
|
228 | popover__inner
|
229 | ```
|
230 |
|
231 | In case you want to customize the colors of the popover, here's an example of what you need to do:
|
232 |
|
233 | ```scss
|
234 | .red {
|
235 | .popover__inner {
|
236 | background-color: #ac2121;
|
237 | border: 1px solid #700404;
|
238 | }
|
239 |
|
240 | .popover__arrow {
|
241 | border-color: #ac2121;
|
242 | }
|
243 |
|
244 | .popover__arrow-border {
|
245 | border-color: #700404;
|
246 | }
|
247 | }
|
248 | ```
|
249 |
|
250 | ```jsx
|
251 | <PopoverGate content="This is some text" className="red">
|
252 | <button className="App-button">Click me</button>
|
253 | </PopoverGate>
|
254 | ```
|