DEV Community

loading...

Another react-spring based component: react-spring-dialog

Emiliano Bucci
Updated on ・1 min read

Hi to all! Today I'm happy to announce the release of my second open source library. Yes, it's another dialog component I know but, if you like, take a look at it :)

Features

  • Excelent performances thanks to react-spring.
  • Accessibility ready thanks to the use of focus-trap-react among other things.
  • Easy to style and to configure: no more headaches or hacky things trying to make the Dialog looks like we want.

How to use it

import { Dialog } from 'react-spring-dialog'

export function Component() {
  const [isActive, setIsActive] = useState(false)

  return (
    <Dialog isActive={isActive} onClose={() => setIsActive(false)}>
      <div>Dialog content</div>
      <button onClick={() => setIsActive(false)}>CLOSE</button>
    </Dialog>
  )
}
Enter fullscreen mode Exit fullscreen mode

Repository

Visit here

Official documentation

Visit here

Accessible, easy to use, smooth animations, and fully configurable!

Discussion (0)