116 | {this.props.children}
117 | {ReactDOM.createPortal(
118 |
119 | {Object.entries(alertsByPlace).map(([placement, alertArr]) => {
120 | const Wrapper = PlacementWrapperDiv[placement]
121 | return (
122 |
126 |
127 |
128 | )
129 | })}
130 |
,
131 | this.alertMountNode
132 | )}
133 |
134 | )
135 | }
136 | }
137 |
138 | export default AlertsProvider
139 |
--------------------------------------------------------------------------------
/src/components/Alerts/StyledAlerts.tsx:
--------------------------------------------------------------------------------
1 | import styled from "styled-components"
2 | import { animated } from "react-spring"
3 |
4 | const positionBoxStyle = `
5 | position: fixed;
6 | overflow: hidden;
7 | display: flex;
8 | pointer-events: none;
9 | > * {
10 | pointer-events: auto;
11 | }
12 | `
13 |
14 | export const TopLeftBox = styled.div`
15 | ${positionBoxStyle}
16 | left: 0px;
17 | top: 0px;
18 | padding-top: 10px;
19 | padding-left: 10px;
20 | flex-flow: column nowrap;
21 | align-items: flex-start;
22 | `
23 |
24 | export const TopRightBox = styled.div`
25 | ${positionBoxStyle}
26 | right: 0px;
27 | top: 0px;
28 | padding-top: 10px;
29 | padding-right: 10px;
30 | flex-flow: column nowrap;
31 | align-items: flex-end;
32 | `
33 |
34 | export const BottomLeftBox = styled.div`
35 | ${positionBoxStyle}
36 | left: 0px;
37 | bottom: 0px;
38 | padding-bottom: 10px;
39 | padding-left: 10px;
40 | flex-flow: column-reverse nowrap;
41 | align-items: flex-start;
42 | `
43 |
44 | export const BottomRightBox = styled.div`
45 | ${positionBoxStyle}
46 | right: 0px;
47 | bottom: 0px;
48 | padding-bottom: 10px;
49 | padding-right: 10px;
50 | flex-flow: column-reverse nowrap;
51 | align-items: flex-end;
52 | `
53 |
54 | export const TransitionDiv = styled(animated.div)`
55 | margin: 4px 0;
56 | `
57 |
58 | export const AlertDiv = styled(animated.div)``
59 |
--------------------------------------------------------------------------------
/src/components/Alerts/TransitionWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { AlertProps } from "./types"
2 | import React, { useState, useEffect } from "react"
3 | import { useTransition, UseTransitionResult } from "react-spring"
4 | import { TransitionDiv, AlertDiv } from "./StyledAlerts"
5 | import Alert from "./Alert"
6 | import { SpringConfig, State } from "react-spring/renderprops"
7 |
8 | // This interface extend Transition's return component with prop have properties Life,
9 | // which is not defined in react-spring's types but implemented in the their code
10 | interface UserTransitionResultWithLife
11 | extends UseTransitionResult