Skip to content

ijsto/react-slideout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


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

About

Lightweight React SlideOut / Sidebar component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published