@datalayer/core/lib/hooks/useBackdrop.js

[](https://datalayer.io)

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { createContext, useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { LayoutBackdrop } from './layouts';
export const BackdropContext = createContext({
    closeBackdrop: () => { },
    displayBackdrop: (nextBackdrop) => { },
});
export function useBackdrop() {
    const context = useContext(BackdropContext);
    if (!context)
        throw new Error('useContext must be inside a provider with a value.');
    return context;
}
/**
 * The type for the Backdrop context provider.
 */
export const BackdropContextProvider = BackdropContext.Provider;
/*
Example
-------
import React from 'react'
import { BackdropProvider } from 'use-backdrop';
import ExampleComponent from './ExampleComponent'
const renderCustomBackdropSurface = (children) => (
  <div style={{
    // Style your own backdrop surface!
    position: 'fixed',
    top: 0,
    left: 0,
    height: '100vh',
    width: '100vw',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  }}>
    {children}
  </div>
)
const App = () => (
  <BackdropProvider
    backdropSurface={renderCustomBackdropSurface}
  >
    <ExampleComponent />
  </BackdropProvider>
)
export default App
*/
export function BackdropProvider({ children = null, zIndex = 9999, disableDarken = false, backdropSurface = null, }) {
    const defaultBackdropSurface = {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: disableDarken ? 'initial' : 'rgba(0, 0, 0, 0.5)',
        zIndex,
    };
    const [backdrop, setBackdrop] = useState({
        open: false,
        render: (closeBackdrop) => _jsx(_Fragment, {}),
    });
    const displayBackdrop = (nextBackdrop) => {
        setBackdrop({
            open: true,
            render: nextBackdrop,
        });
    };
    const closeBackdrop = () => {
        setBackdrop({
            open: false,
            render: (closeBackdrop) => _jsx(_Fragment, {}),
        });
    };
    return (_jsxs(BackdropContextProvider, { value: { closeBackdrop, displayBackdrop }, children: [_jsx(LayoutBackdrop, {}), children, backdrop.open &&
                (backdropSurface ? (backdropSurface(backdrop.render(closeBackdrop))) : (_jsx("div", { style: defaultBackdropSurface, children: backdrop.render(closeBackdrop) })))] }));
}
BackdropProvider.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.arrayOf(PropTypes.node),
    ]),
    // zIndex of the backdrop surface. Unused if backdropSurface is overridden.
    zIndex: PropTypes.number,
    // If true, backdrop background is transparent.
    disableDarken: PropTypes.bool,
    // A render function that returns a Component that overrides (takes the
    // place of) the default darkened div background.
    // See /example/src/ExampleApp.jsx for proper use.
    backdropSurface: PropTypes.func,
};