https://github.com/mattjennings/react-modal

React modal components built for theme-ui
https://github.com/mattjennings/react-modal

Last synced: about 7 hours ago
JSON representation

React modal components built for theme-ui

• Host: GitHub
• URL: https://github.com/mattjennings/react-modal
• Owner: mattjennings
• License: mit
• Created: 2020-08-02T06:14:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T07:39:26.000Z (over 1 year ago)
• Last Synced: 2024-11-02T05:08:51.229Z (5 days ago)
• Language: TypeScript
• Size: 6.34 MB
• Stars: 12
• Watchers: 3
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-modal

React modal components built for [theme-ui](https://github.com/system-ui/theme-ui) with [framer-motion](https://github.com/framer/motion) for animations.

[Live Demo](https://mattjennings.github.io/react-modal/)

## Install

```

npm install @mattjennings/react-modal

```

## Usage

Update your theme-ui theme to include the modal theme

```jsx

import { tailwind } from '@theme-ui/presets'

import { withModalTheme } from '@mattjennings/react-modal'

export const theme = withModalTheme(tailwind)

```

Create a modal

```jsx

import React from 'react'

import {

  Modal,

  ModalTitle,

  ModalContent,

  ModalFooter,

} from '@mattjennings/react-modal'

import { Text, Button } from 'theme-ui'

function MyModal(props) {

  return (

    

      {({ onClose }) => (

        <>

          

            

              Hello!

            

          

          

            This is a modal example

          

          

            OK

          

        >

      )}

    

  )

}

function MyApp() {

  return (

    


      

    

  )

}

```


## AnimatedModalStack

`AnimatedModalStack` built on top of [@mattjennings/react-modal-stack](https://github.com/mattjennings/react-modal-stack). As long as the Modal is a motion component at the root, it will animate them in/out appropriately.

```jsx

import React from 'react'

import { AnimatedModalStack } from '@mattjennings/react-modal'

import App from './App'

React.render(

  

    

  ,

  document.querySelector('#root')

)

```

## Theming

View the [theme file](./src/theme.ts) to see which properties are customizable.

```jsx

import { tailwind } from '@theme-ui/presets'

import { withModalTheme } from '@mattjennings/react-modal'

export const theme = withModalTheme({

  ...tailwind,

  modals: {

    // add a new `outlined` variant that can be used on 

    outlined: {

      backgroundColor: 'background',

      border: '1px solid',

      borderRadius: '5px',

      borderColor: 'gray',

      display: 'flex',

      flexDirection: 'column',

      maxHeight: '100vh',

      minHeight: '16rem',

      minWidth: '16rem',

      maxWidth: '64rem',

      position: 'absolute',

      top: ['25%', '25%', '10%'],

      zIndex: 'modal',

    },

    // will be used for the `outlined` variant when the modal is in full screen

    outlinedFullScreen: {

      backgroundColor: 'background',

      display: 'flex',

      flexDirection: 'column',

      minHeight: '100vh',

      maxHeight: '100vh',

      height: `fill-available`,

      position: 'absolute',

      top: 0,

      width: '100vw',

      zIndex: 'modal',

    },

  },

})

```