junkyard-ui Documentation

Installation

First, you'll need to install the package into your project. You can do this using npm or yarn:

npm install junkyard-ui

or

yarn add junkyard-ui

Importing Components

You can import the required components from the package as follows:

import { AppShell, useDrawerContext } from 'junkyard-ui'

Using the AppShell Component

The AppShell component in this package is a context provider component. It contains the Drawer component and accepts a configuration object via its config prop:

<AppShell config={config}>{/* Your app code goes here */}</AppShell>

In your application, you would include your other components inside the AppShell context provider.

Accessing Drawer Context

You can access the state and actions related to the Drawer using the useDrawerContext hook:

const {
  state: { anchor, content, isOpen, width, backdropClickClose },
  actions: {
    openDrawer,
    closeDrawer,
    setWidth,
    setContent,
    setAnchor,
    setBackdropClickClose,
  },
} = useDrawerContext()

Actions

• openDrawer: This function opens the drawer. It takes four parameters:
  • content: The ReactNode to be displayed in the drawer.
  • anchor: Optional. Determines which side of the screen the drawer appears from. It can be 'left', 'right', 'top', or 'bottom'. The default is 'right'.
  • width: Optional. Sets the width of the drawer as a percentage of the screen width. The default is 70.
  • backdropClickClose: Optional. Determines whether clicking outside the drawer will close it. The default is true.
• closeDrawer: This function closes the drawer.

State

• isOpen: This boolean value represents whether the drawer is open or not.
• content: This ReactNode represents the current content of the drawer.

Example

Here's an example of how to use the AppShell and its context in your application:

import { Button } from '@mui/material'
import { AppShell, useDrawerContext } from 'junkyard-ui'

function MyComponent() {
  const {
    actions: { openDrawer },
  } = useDrawerContext()
  return (
    <Button onClick={() => openDrawer(<div>Hello, World!</div>)}>
      Open Drawer
    </Button>
  )
}

function MyApp() {
  return (
    <AppShell
      config={
        {
          /* your drawer config here */
        }
      }
    >
      <MyComponent />
    </AppShell>
  )
}

In the above example, clicking the button in MyComponent will open the drawer with the content "Hello, World!".

Remember to replace {/* your drawer config here */} with your actual drawer configuration.

Contributing

We welcome contributions from the community! Please check out our CONTRIBUTING.md for guidelines on how to contribute to this project.