# Layer

## Examples


### Basic

This example shows a simple overlay that can be dismissed by pressing the Escape key.

```typescript
import React, { useState } from 'react';

import Button from '@splunk/react-ui/Button';
import Layer from '@splunk/react-ui/Layer';


function Basic() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <>
            <Button onClick={handleOpen} label="Open" />
            <Layer closeReasons={['escapeKey']} open={open} onRequestClose={handleClose}>
                <div
                    style={{
                        position: 'absolute',
                        bottom: '5%',
                        right: '5%',
                        width: '300px',
                        height: '100px',
                        backgroundColor: 'crimson',
                        borderRadius: '3px',
                    }}
                />
            </Layer>
        </>
    );
}

export default Basic;
```




## API

import React from 'react';

import ComponentAPI from '@splunk/react-docs/ComponentAPI';
import UtilAPI from '@splunk/react-docs/UtilAPI';

import layerStackUtilDocs from '!!@splunk/jsdoc-loader!@splunk/react-ui/Layer/LayerStack';
import allLayerDocs from '@splunk/react-ui/Layer/Layer?parseDocs';
import allLayerStackDocs from '@splunk/react-ui/Layer/LayerStack?parseDocs';

const layerDocs = allLayerDocs.find((doc) => doc.displayName === 'Layer');
const layerStackDocs = allLayerStackDocs.find(
    (doc) => doc.displayName === 'LayerStackGlobalProvider'
);

function DevelopSection() {
    return [
        <ComponentAPI docs={layerDocs} title="Layer" key="layer" />,
        <ComponentAPI docs={layerStackDocs} title="LayerStackGlobalProvider" key="layerstack" />,
        <UtilAPI key="layerstackutils" docs={layerStackUtilDocs} />,
    ];
}

export default DevelopSection;