DEV Community

Emiliano Bucci
Emiliano Bucci

Posted on • Edited on

2 2

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

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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay