ijsto
react-slideout
Accessible SlideOut component for React.JS
📖 Table of Contents
- Installation
- Examples
- API documentation -- Available props -- Styling guide
- Demos
- Roadmap
- Contribution
📦 Installation
To install, you can use npm:
$ npm install @ijsto/react-slideoutor yarn:
$ yarn add @ijsto/react-slideout🔨 How to Use
Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:
import React, { useState } from "react";
import SlideOut from "@ijsto/react-slideout";
const MySlideOut = () => {
const [slideOutIsOpen, setSlideOutIsOpen] = useState(false);
const openSlideOut = () => {
setSlideOutIsOpen(true);
};
const closeSlideOut = () => {
setSlideOutIsOpen(false);
};
return (
<div>
<button onClick={openSlideOut}>Open Modal</button>
<SlideOut isOpen={slideOutIsOpen} onClose={closeSlideOut}>
<h2>My Slide Out</h2>
<div>This is the content inside React Slide Out component.</div>
<button onClick={closeSlideOut}>Close slide-out</button>
</SlideOut>
</div>
);
};More examples are coming soon.
📜 API documentation
Props
The following propertiess are available:
| Property name | Type | Default | Description |
|---|---|---|---|
| bg | CSS Color | "white" |
Any legal CSS color value component |
| children | A React component | - | Any React component - this will appear in the slideout |
| classNamePrefix | string | - | Namespace - will be applied to all SlideOut components |
| closeComponent | React Component or html element | - | Custom close button component |
| hideClose | boolean | false |
Use this to hide close button. You can use parent component to handle state and toggle |
| isOpen | boolean | - | Controls whether the slideout is visible |
| max-width | CSS unit | 100% |
Custom max-width of the the Slideout container. |
offsetTop | CSS Unit | 0 | Offset slideout from top. Useful to account for the header height. |
| onClose | function | internal state toggle | A function that will close the Slideout |
| onCloseComponentKeyDown | function | - | Accessibility handler |
| onCloseComponentKeyPress | function | - | Accessibility handler |
| onCloseComponentKeyUp | function | - | Accessibility handler |
| onOverlayKeyPress | function | - | Accessibility handler |
| overflowShouldLock | Boolean | true | Locks the document body overflow-y |
| overlayColor | HEX Color code | "#000000" (black) | Changes overlay color must be in HEX format (example: "#ffffff") |
| overlayOpacity | integer from 0 to 1 | 0.5 | Changes default opacity of the overlay |
| padding | CSS unit | - | Applied to the inner SlideOut container |
| shouldCloseOnOverlayClick | boolean | true | To disable closing, when user clicks on overlay set shouldCloseOnOverlayClick={false} |
| slideFrom | string | "left" | Determines the location from where slideout will appear |
| speed | integer | 0.3s | Controls the speed of the slideout animation |
| width | CSS unit | 350px | Custom width of the the Slideout |
| zIndexIncrement | integer | 0 | Increments all zIndexes by the provided value. See default zIndexes below. |
Stacking (zIndexes)
By default Slideout components have the following zIndexes:
Here are the available classNames:
- wrapper // 7
- close-overlay // 8
- body // 9
Styling
We provide more fine-grained control over all React-Slideout components via CSS class names.
Here are the available classNames:
- wrapper // the top-level Slideout component
- body // the Slideout component content
- close-button //
- close-component // wrapper that wrapper your custom close component
- close-overlay // style overlay
background,opacity,z-indexetc.
🎬 Demos
Coming soon.
🗺️ Roadmap
- Add entry from other sides
- Add focus management system
- Improve accessibility
🙆♂️ Contributions
Please feel free to submit PRs for the above (Roadmap) goals or otherwise