react-spring-dialog

A simple, accessible and performant dialog component

Usage no npm install needed!

<script type="module">
  import reactSpringDialog from 'https://cdn.skypack.dev/react-spring-dialog';
</script>

README

React Spring Dialog

A simple, accessible and performant Dialog component powered by react-spring.

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.

Install

npm install --save react-spring-dialog

or

yarn add react-spring-dialog

How to use it

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

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

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

Official documentation

Visit here