---

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