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-slideout

or 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-index etc.

🎬 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

iJS.to