---
name: 3.7 - ModalBlur
route: /components/modal-blur
order: 75
menu: 3. Components
---

# ModalBlur
With ModalBlur you can create awesome modals using brand new CSS3 blur effects.
Similar with the Modal Component, it has support for the package `react-hotkeys` out of the box.

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

## Properties

<PropsTable of={ModalBlur} />

## Basic usage
In order to show the component, you just need to pass a `visible` prop. The `onRequestToClose` will listen to `react-hotkeys` packages and trigger an event. Then, with it, you can close or create a custom logic.

<Playground>
  <State initial={{ visible: false }}>
    {({ state, setState }) =>
      <div>
        <Button
          outline
          onPress={() => {
            setState({ visible: true })
          }}
        >
          Open Modal
        </Button>
        <ModalBlur
          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>
        </ModalBlur>
      </div>
    }
  </State>
</Playground>

## Close using keyboard
Pointr's ModalBlur 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>
        <ModalBlur
          visible={state.visible}
          closeKeys={['space']}
          onRequestToClose={() => {
            setState({ visible: false })
          }}
        >
          <div>Press SPACE to close me!</div>
        </ModalBlur>
      </div>
    }
  </State>
</Playground>

## Preventing to close via keyboard / backdrop.
By default, the modal will close whenever the user press `esc`. 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>
        <ModalBlur
          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>
        </ModalBlur>
      </div>
    }
  </State>
</Playground>