Skip to content

Latest commit

 

History

History
31 lines (21 loc) · 952 Bytes

Dimmable.md

File metadata and controls

31 lines (21 loc) · 952 Bytes
Raw

<Dimmable>

Dims element similar to <Dimmer>, with additional features:

  • Works on server side.
  • Sets aria-hidden="true", if element is dimmed.
  • Sets pointer-events: none, if element is dimmed.
  • Blurs dimmed element.

Usage

import {Dimmable} from 'libreact/lib/Dimmable';

<Dimmable dim renderOverlay={(dim) => 'Overlay...'}>
  <div style={{width: 500, height: 300, border: '1px solid tomato'}}>
    Inline...
  </div>
</Dimmable>

Props

Accepts all <Dimmer> props (except hidden, use dim instead) in addition to its own:

  • dim — optional, boolean, whether to show dim overlay, defaults to false.
  • blur — optional, number, blur intensity in px when dimmed, defaults to 5.
  • renderOverlay — optional, function, returns contents to render in overlay when element is dimmed. Receives a single argument — boolean, whether element is dimmed.