@ijsto/react-slideout NPM

react-slideout

Accessible SlideOut component for React.JS

📖 Table of Contents

📦 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.