{"record":{"id":"d1c515e7cd48726b","repo":"marmelab/react-admin","slug":"useclosenotification-must-be-used-within-a-closeno","errorCode":null,"errorMessage":"useCloseNotification must be used within a CloseNotificationContext.Provider","messagePattern":"useCloseNotification must be used within a CloseNotificationContext\\.Provider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/notification/useCloseNotification.ts","lineNumber":7,"sourceCode":"import { useContext } from 'react';\nimport { CloseNotificationContext } from './CloseNotificationContext';\n\nexport const useCloseNotification = () => {\n    const closeNotification = useContext(CloseNotificationContext);\n    if (!closeNotification) {\n        throw new Error(\n            'useCloseNotification must be used within a CloseNotificationContext.Provider'\n        );\n    }\n    return closeNotification;\n};\n","sourceCodeStart":1,"sourceCodeEnd":13,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/notification/useCloseNotification.ts#L1-L13","documentation":"useCloseNotification exposes the function that closes the currently displayed notification; it is provided by react-admin's <Notification> component via CloseNotificationContext. The hook throws when no provider is present in the tree, i.e. when the app doesn't render <Notification> (or renders the calling component outside it).","triggerScenarios":"Calling useCloseNotification() in an app that never renders <Notification>, or in a component mounted outside the react-admin layout tree (custom page, portal) so it doesn't see the provider.","commonSituations":"Building a custom notification-dismiss button before adding <Notification> to the Layout; using react-admin hooks inside a plain React page without the admin Layout; upgrading react-admin where <Notification> was accidentally removed from the custom Layout.","solutions":["Render <Notification /> (or a custom notification component providing CloseNotificationContext) inside your Layout or Admin root so the context is available.","Render the consuming component inside the react-admin Layout so it is a descendant of the provider.","If you only want to dismiss notifications, use useNotify with undoable/pending logic or manage the notification yourself instead of this internal hook."],"exampleFix":"// before\n// CustomLayout.jsx without <Notification>\nconst CustomLayout = ({ children }) => <div>{children}</div>;\nconst CloseButton = () => {\n    const close = useCloseNotification(); // throws\n    return <button onClick={close}>x</button>;\n};\n\n// after\nimport { Notification } from 'react-admin';\nconst CustomLayout = ({ children }) => (\n    <div>\n        {children}\n        <Notification />\n    </div>\n);\nconst CloseButton = () => {\n    const close = useCloseNotification();\n    return <button onClick={close}>x</button>;\n};","handlingStrategy":"validation","validationCode":"import { useContext } from 'react';\nimport { CloseNotificationContext } from 'ra-core';\nconst ctx = useContext(CloseNotificationContext);\nif (!ctx) {\n    // render nothing or a fallback instead of calling the hook\n    return null;\n}","typeGuard":"const hasCloseNotification = (v: (() => void) | undefined): v is () => void => typeof v === 'function';","tryCatchPattern":null,"preventionTips":["Always render <Notification /> in a custom Layout copied from the default one.","Keep components using this hook inside the react-admin Layout subtree, not in portals or modals mounted outside it.","After upgrading react-admin, check the Layout still mounts Notification."],"tags":["react","context","notification","hooks"],"backgroundTag":"react-hook-outside-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}