1.1.1 • Published 11 months ago
toasty-react v1.1.1
Toasty-React
Toasty-React allows you to add notifications to your app!
Installation
$ npm install --save toasty-react
$ yarn add toasty-react
Features
- Easy to set up and use
- Can set the CSS styling of the Toast
- The location of the Toast can be set to 6 different locations
- Toast can display a string of text or a React component
- The duration of the toast and any of the animation timing can be changed
Example
import useToast from 'toasty-react'
function App() {
const [Toast, open] = useToast()
return(
<>
<Toast />
<button onClick={() => open(<>Text in Toast</>)}>Open Toast</button>
</>
)
}
Changing the Location
import useToast from 'toasty-react'
function App() {
const [Toast, open, Location] = useToast()
return(
<>
<Toast />
<button onClick={() => Location.update(Location.topLeft)}>Top Left</button>
<button onClick={() => Location.update(Location.bottomLeft)}>Bottom Left</button>
<button onClick={() => Location.update(Location.topRight)}>Top Right</button>
<button onClick={() => Location.update(Location.bottomRight)}>Bottom Right</button>
<button onClick={() => Location.update(Location.topCenter)}>Top Center</button>
<button onClick={() => Location.update(Location.bottomCenter)}>Bottom Center</button>
<button onClick={() => open(<>Text in Toast</>)}>Open Toast</button>
</>
)
}
Setting CSS Stylings
import useToast from 'toasty-react'
function App() {
const [Toast, open] = useToast()
const [popupText, setPopupText] = useState("app open test")
const [fontSize, setFontSize] = useState(16)
const [color, setColor] = useState("black")
const [fontStyle, setFontStyle] = useState("normal")
const [fontWeight, setFontWeight] = useState(400)
const [fontFamily, setFontFamily] = useState("default")
const [border, setBorder] = useState("2px solid transparent")
const [backgroundColor, setBackgroundColor] = useState("#fafafa")
return(
<>
<Toast style={{ color: color, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, border: border, backgroundColor: backgroundColor }}/>
<button onClick={() => open(<>Text in Toast</>)}>Open Toast</button>
</>
)
}
1.1.1
11 months ago
1.0.19-beta.21
12 months ago
1.0.19-beta.20
12 months ago
1.0.19-beta.19
12 months ago
1.0.19-beta.18
12 months ago
1.0.19-beta.17
12 months ago
1.0.19-beta.16
12 months ago
1.0.19-beta.15
12 months ago
1.0.19-beta.14
12 months ago
1.0.19-beta.13
12 months ago
1.0.19-beta.12
12 months ago
1.0.19-beta.11
12 months ago
1.0.19-beta.10
12 months ago
1.0.19-beta.9
12 months ago
1.0.19-beta.8
12 months ago
1.0.19-beta.7
12 months ago
1.0.19-beta.5
12 months ago
1.0.19-beta.4
12 months ago
1.0.19-beta.3
12 months ago
1.0.19-beta.2
12 months ago
1.0.19-beta.1
12 months ago
1.0.19-beta.0
12 months ago
1.0.18
12 months ago
1.0.17
12 months ago
1.0.17-beta.3
12 months ago
1.0.17-beta.2
12 months ago
1.0.17-beta.1
12 months ago
1.0.17-beta.0
12 months ago
1.0.16
12 months ago
1.0.15
12 months ago
1.0.14
12 months ago
1.0.13
12 months ago
1.0.12
1 year ago
1.0.10
1 year ago
1.1.0
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago