First, you'll need to install the package into your project. You can do this using npm or yarn:
\n\n\nnpm install junkyard-ui\n\n\nor\n\n```javascript\nyarn add junkyard-ui\n```\n\n
You can import the required components from the package as follows:
\n\n```javascript\nimport { AppShell, useDrawerContext } from 'junkyard-ui'\n```\n\nThe AppShell component in this package is a context provider component. It contains the Drawer component and accepts a configuration object via its config prop:
\n\n```javascript\nIn your application, you would include your other components inside the AppShell context provider.
\n\nYou can access the state and actions related to the Drawer using the useDrawerContext hook:
\n\n```javascript\nconst {\n state: { anchor, content, isOpen, width, backdropClickClose },\n actions: {\n openDrawer,\n closeDrawer,\n setWidth,\n setContent,\n setAnchor,\n setBackdropClickClose,\n },\n} = useDrawerContext()\n```\n\nHere's an example of how to use the AppShell and its context in your application:
\n\n```javascript\nimport { Button } from '@mui/material'\nimport { AppShell, useDrawerContext } from 'junkyard-ui'\n\nfunction MyComponent() {\n const {\n actions: { openDrawer },\n } = useDrawerContext()\n return (\n \n )\n}\n\nfunction MyApp() {\n return (\nIn the above example, clicking the button in MyComponent will open the drawer with the content \"Hello, World!\".
\nRemember to replace {/* your drawer config here */} with your actual drawer configuration.
\n\nWe welcome contributions from the community! Please check out our CONTRIBUTING.md for guidelines on how to contribute to this project.
\n","readmeFilename":"readme.md"}