diff --git a/packages/docs/pages/Alert/AlertPage.tsx b/packages/docs/pages/Alert/AlertPage.tsx index 2d6a51945..76f22a6d1 100644 --- a/packages/docs/pages/Alert/AlertPage.tsx +++ b/packages/docs/pages/Alert/AlertPage.tsx @@ -1,4 +1,4 @@ -import { AlertProps, AlertsManager, Button, H0, H1, H2, Message, Text } from '@bigcommerce/big-design'; +import { AlertProps, Button, H0, H1, H2, Message, Text } from '@bigcommerce/big-design'; import React from 'react'; import { Code, CodePreview, CodeSnippet } from '../../components'; @@ -69,27 +69,44 @@ const AlertPage = () => ( warning, success, info. - To use this component, wrap your app with this component: + + To use this component, put it in your root component (e.g. place it after GlobalStyles component): + - {/* jsx-to-string:start */} - {function App() { - return ( - <> - {/* ... */} - - {/* ... */} - - ); - }} - - {/* jsx-to-string:end */} + {` + export const alertsManager = createAlertsManager(); // import this in child components to use alerts + + function App() { + return ( + <> + {/* ... */} + + + {/* ... */} + + ); + } + `} - This works in conjunction with an instance created by createAlertsManager function below. + This works in conjunction with an instance created by createAlertsManager function below. You need to + export alertsManager instance and then you can import it in child components in order to trigger + alert: + + {` + import { alertsManager } from '../App'; + + // ... + + const alert = {}; // alert props + alertsManager.add(alert); + `} + +

createAlertsManager