popup.svgPopup for React and Next.js.
Popup with timer hide
popup-from-futureToday
INSTALALTION
npm i popup-from-future
yarn add popup-from-future
pnpm install popup-from-future
HOW USE
IMPORTANT INFO
1import "popup-from-future/style.css";
2
3const App = () => { ... }EXAMPLE
1import { useState } from "react";
2import { Popup } from "popup-from-future";
3import "popup-from-future/style.css";
4
5export const App = () => {
6 const [isOpen, setIsOpen] = useState(false);
7
8 return (
9 <React.Fragment>
10 <button
11 type="button"
12 onClick={() => setIsOpen(true)}
13 >
14 Open popup
15 </button>
16
17 <Popup
18 isOpen={isOpen}
19 open={setIsOpen}
20 >
21 <h2>Hello</h2>
22 <p>Popup content</p>
23 </Popup>
24 </React.Fragment>
25 );
26};SELECT ANIMATION
1import { useState } from "react";
2import { Popup } from "popup-from-future";
3import "popup-from-future/style.css";
4
5export const App = () => {
6 const [isOpen, setIsOpen] = useState(false);
7
8 return (
9 <React.Fragment>
10 <button
11 type="button"
12 onClick={() => setIsOpen(true)}
13 >
14 Open popup
15 </button>
16
17 <Popup
18 isOpen={isOpen}
19 open={setIsOpen}
20 animation={{
21 duration: 450,
22 easing: "ease-in-out",
23 open: {
24 animationName: "zoom-in",
25 },
26 close: {
27 animationName: "zoom-out",
28 },
29 }}
30 >
31 Animated popup
32 </Popup>
33 </React.Fragment>
34 );
35};PER-PHASE ANIMATION
1<Popup
2 isOpen={isOpen}
3 open={setIsOpen}
4 animation={{
5 open: {
6 animationName: "bounce-in",
7 duration: 700,
8 easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
9 },
10 close: {
11 animationName: "fade-out",
12 duration: 300,
13 easing: "ease-out",
14 },
15 }}
16>
17 Content
18</Popup>FULL EXAMPLE
1"use client";
2
3import {
4 CSSProperties,
5 useRef,
6 useState,
7} from "react";
8import {
9 Popup,
10 type PopupCloseTimerComponentProps,
11} from "popup-from-future";
12import "popup-from-future/style.css";
13
14export const PopupFullExample = () => {
15 const [isOpen, setIsOpen] = useState(false);
16
17 const popupRef = useRef<HTMLDivElement>(null);
18
19 return (
20 <>
21 <button
22 type="button"
23 onClick={() => setIsOpen(true)}
24 >
25 Open popup
26 </button>
27
28 <Popup
29 ref={popupRef}
30 isOpen={isOpen}
31 open={setIsOpen}
32 index={99999}
33 preset="aurora"
34 size={{
35 w: "650px",
36 h: "500px",
37 }}
38 animation={{
39 duration: 600,
40 easing: "cubic-bezier(0.22, 1, 0.36, 1)",
41
42 // animationName: "fade-in",
43
44 open: {
45 animationName: "zoom-in",
46 duration: 700,
47 easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
48 },
49
50 close: {
51 animationName: "blur-out",
52 duration: 450,
53 easing: "ease-in-out",
54 },
55 }}
56 layer={{
57 backgroundColor: "rgba(3, 7, 18, 0.72)",
58 blur: "12px",
59
60 style: {
61 padding: "20px",
62 },
63
64 className: "example-popup-layer",
65 }}
66 close={{
67 icon: (
68 <span
69 style={{
70 display: "grid",
71 placeItems: "center",
72 width: "100%",
73 height: "100%",
74 fontSize: "24px",
75 }}
76 >
77 ×
78 </span>
79 ),
80
81 // render: ({ close }) => (
82 // <button
83 // type="button"
84 // onClick={close}
85 // >
86 // Close
87 // </button>
88 // ),
89
90 size: "40px",
91
92 style: {
93 top: "12px",
94 right: "12px",
95 color: "#ffffff",
96 background: "rgba(255, 255, 255, 0.12)",
97 border: "1px solid rgba(255, 255, 255, 0.18)",
98 borderRadius: "50%",
99 boxShadow: "0 8px 24px rgba(0, 0, 0, 0.2)",
100 backdropFilter: "blur(12px)",
101 WebkitBackdropFilter: "blur(12px)",
102 },
103
104 className: "example-popup-close",
105
106 timeOutShow: "5s",
107
108 timer: {
109 // render: ({
110 // seconds,
111 // remainingMs,
112 // duration,
113 // progress,
114 // style,
115 // className,
116 // }: PopupCloseTimerComponentProps) => (
117 // <CustomTimer
118 // seconds={seconds}
119 // remainingMs={remainingMs}
120 // duration={duration}
121 // progress={progress}
122 // style={style}
123 // className={className}
124 // />
125 // ),
126
127 style: {
128 color: "#ffffff",
129 background: "rgba(255, 255, 255, 0.08)",
130 },
131
132 className: "example-popup-timer",
133 },
134 }}
135 header={{
136 content: (
137 <div
138 style={{
139 display: "flex",
140 flexDirection: "column",
141 gap: "4px",
142 }}
143 >
144 <strong
145 style={{
146 fontSize: "22px",
147 }}
148 >
149 Full popup example
150 </strong>
151
152 <span
153 style={{
154 fontSize: "13px",
155 opacity: 0.7,
156 }}
157 >
158 All available Popup props
159 </span>
160 </div>
161 ),
162 }}
163 customStyle={{
164 container: {
165 style: {
166 padding: "24px",
167 gap: "20px",
168
169 // width: "700px",
170 // height: "550px",
171
172 borderRadius: "28px",
173 },
174
175 className: "example-popup-container",
176 },
177
178 header: {
179 style: {
180 width: "100%",
181 paddingRight: "50px",
182 flexShrink: 0,
183 },
184
185 className: "example-popup-header",
186 },
187
188 body: {
189 style: {
190 width: "100%",
191 padding: "10px",
192 gap: "16px",
193 overflowX: "hidden",
194 overflowY: "auto",
195 },
196
197 className: "example-popup-body",
198 },
199 }}
200 >
201 <div
202 style={{
203 display: "flex",
204 flexDirection: "column",
205 gap: "16px",
206 width: "100%",
207 }}
208 >
209 <p>
210 Popup children can contain any React content.
211 </p>
212
213 <input
214 type="text"
215 placeholder="Input inside popup"
216 />
217
218 <textarea
219 placeholder="Textarea inside popup"
220 rows={4}
221 />
222
223 <div
224 style={{
225 display: "flex",
226 gap: "10px",
227 }}
228 >
229 <button type="button">
230 Action
231 </button>
232
233 <button
234 type="button"
235 onClick={() => setIsOpen(false)}
236 >
237 Close from content
238 </button>
239 </div>
240 </div>
241 </Popup>
242 </>
243 );
244};
245
246const CustomTimer = ({
247 seconds,
248 remainingMs,
249 duration,
250 progress,
251 style,
252 className,
253}: PopupCloseTimerComponentProps) => {
254 return (
255 <div
256 className={className}
257 style={
258 {
259 ...style,
260 display: "grid",
261 placeItems: "center",
262 width: "100%",
263 height: "100%",
264 borderRadius: "50%",
265 } as CSSProperties
266 }
267 >
268 <span>{seconds}</span>
269
270 <span
271 style={{
272 display: "none",
273 }}
274 >
275 {remainingMs}
276 {duration}
277 {progress}
278 </span>
279 </div>
280 );
281};Show props
Animation show
show speed 300msHide props
Animation show
hide speed 300msSelect preset theme
Use timer: OFF
CODE OUTPUT
1"use client";
2
3import { useState } from "react";
4import { Popup } from "popup-from-future";
5import "popup-from-future/style.css";
6
7const App = () => {
8 const [isOpen, setIsOpen] = useState(false);
9
10 return (
11 <>
12 <button
13 type="button"
14 onClick={() => setIsOpen(true)}
15 >
16 Open Popup
17 </button>
18
19 <Popup
20 isOpen={isOpen}
21 open={setIsOpen}
22 animation={{
23 open: {
24 animationName: "jello-in",
25 duration: 300,
26 easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
27 },
28 close: {
29 animationName: "jello-out",
30 duration: 300,
31 easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
32 },
33 }}
34 preset={"obsidian"}
35 close={{
36 timeOutShow: 0,
37 }}
38 customStyle={{
39 body: {
40 className: "w-9/10",
41 },
42 }}
43 >
44 <div>
45 <p>Popup content</p>
46 </div>
47 </Popup>
48 </>
49 );
50};
51
52export default App;Feedback