React Spring Dialog

Overview

Yes, this is another Dialog component library! But why you should you use it? Well, this is a very simple and performant component, with some interesting features that came out of the box and that will make easy to use a Dialog component in you app.

It's also easy to configure and you don't have to override things in a strange or hacky way to make it look the way you want: you can customize everything in a very simple way!

Feature

• 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

1import { Dialog } from 'react-spring-dialog'
2
3export function Component() {
4  const [isActive, setIsActive] = useState(true)
5
6  return (
7    <Dialog isActive={isActive} onClose={() => setIsActive(false)}>
8       <span>My dialog component!</span>
9       <button onClick={() => setIsActive(false)}>CLOSE</button>
10     </Dialog>
11  )
12}

Ready? Let's start!