1.1.1 • Published 11 months ago

toasty-react v1.1.1

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

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