---
name: 3.6 - Modal
route: /components/modal
order: 75
menu: 3. Components
---

# Modal
Use Pointr's Modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content.
They're are powerful, integrated with `react-hotkeys` package and with a lot of UI customizations.

import { Playground, PropsTable } from 'docz'
import { State } from 'react-powerplug'
import { Modal, Button } from '../'

## Table of properties

<PropsTable of={Modal} />

## Basic usage

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <Modal
          visible={state.visible}
          onRequestToClose={() => {
            setState({ visible: false })
          }}
        >
          <div>Lorem opsum dolor simet at magna lorem ipsum dolor simet at magna lorem ipsum dolor simet at magna</div>
        </Modal>
      </div>
    }
  </State>
</Playground>

## Sizes
You can select over 3 modal sizes: small, medium (default) and large.

<Playground>
  <State initial={{ modalSmallVisible: false, modalLargeVisible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ modalSmallVisible: true })
          }}
        >
          Open modal small
        </Button>
        <Button
          theme="danger"
          outline
          onPress={() => {
            setState({ modalLargeVisible: true })
          }}
        >
          Open modal large
        </Button>
        <Modal
          size="small"
          visible={state.modalSmallVisible}
          onRequestToClose={() => {
            setState({ modalSmallVisible: false })
          }}
        >
          <div>Content of Modal Small</div>
        </Modal>
        <Modal
          size="large"
          visible={state.modalLargeVisible}
          onRequestToClose={() => {
            setState({ modalLargeVisible: false })
          }}
        >
          <div>Content of Modal Large</div>
        </Modal>
      </div>
    }
  </State>
</Playground>

## Close using keyboard
Pointr's Modal support `react-hotkeys` out of the box. Just pass an array of keys and that's it.
In the example bellow, pressing space will close the modal.

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <Modal
          visible={state.visible}
          closeKeys={['space']}
          onRequestToClose={() => {
            setState({ visible: false })
          }}
        >
          <div>Press SPACE to close me!</div>
        </Modal>
      </div>
    }
  </State>
</Playground>

## Preventing to close via keyboard / backdrop.
By default, the modal will close whenever the user press `esc` or pressing in the backdrop. You can disable this behavior and add your custom logic to close it using the prop `cancellable` and `onRequestToClose`:

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <Modal
          visible={state.visible}
          cancellable={false}
        >
          <div>In order to close me, you need to press <a href="javascript:void(0);" onClick={() => { setState({ visible: false }) }}>here</a></div>
        </Modal>
      </div>
    }
  </State>
</Playground>

## Hiding backdrop
By default, we're going to show a backdrop. You can disable this just adding the prop `showBackdrop` as false

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <Modal
          visible={state.visible}
          showBackdrop={false}
          onRequestToClose={() => {
            setState({ visible: false })
          }}
        >
          <div>Modal without backdrop</div>
        </Modal>
      </div>
    }
  </State>
</Playground>

## Changing backdrop color
The default backdrop background color is `rgba(0, 0, 0, 0.5)`, a black with opacity in 50%. You can use the prop `backdropBackground` to change for the color the is more convenient for you.

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          theme="success"
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <Modal
          visible={state.visible}
          backdropBackground="rgba(255, 0, 0, 0.35)"
          onRequestToClose={() => {
            setState({ visible: false })
          }}
        >
          <div>Modal without backdrop</div>
        </Modal>
      </div>
    }
  </State>
</Playground>