react-slider-modal

react slider modal slide in and slide out a div at a certain position.Option to change animation on slider like- fade, zoom, bounce, slide; default it is slide

Usage no npm install needed!

<script type="module">
  import reactSliderModal from 'https://cdn.skypack.dev/react-slider-modal';
</script>

README

React-Slider-Modal

Features

  • slide in and slide out a div at a certain position
  • set slide direction from the top, left, right, bottom, bottom-right, top-right, bottom-left,
  • Add the position of the slider by apply CSS
  • Option to change animation on slider like- fade, zoom, bounce, slide; default it is slide
  • add your class

Installation via NPM

npm install react-slider-modal

npm install animation.css

**Dependency ** Please add animation.css as a dependency on your project

Usage

import slider from 'react-slider-modal';

<Slider render={
  // function or component
} id="" direction="right" />

/* or */

<Slider id="" direction="right" >
  // html , component or function
</Slider>

**Props **

  • sliderStyle- set the style of slider by using css,
  • id - set the id of this slider !important
  • size - set the size of modal small,large,medium, semi-medium
  • closeModal - callback function it call when click outside of modal
  • direction - direction from top, left, right, bottom, bottom-right, top-right, bottom-left
  • toggle - pass the value true/false for show/hide the slider
  • speed - slow, fast, medium, faster
  • closeIcon - function that take state of slider true/false add close icon on modal
  • render - pass the html data as a function , component
  • animation - change animation on slider like- fade, zoom, bounce, slide; default it is slide
  • className - apply class
  • shadow - showing shadow in background, default true
  • outSideClose - click on outside of modal then slider is close, default true
  • outSideMouseEvent - outside enable/disable click event when model is open, default false

Example 1:

import React, { useState } from 'react';
import Slider from 'react-slider-modal';
import 'animate.css/animate.min.css'


function App() {
  const [slideShow, setSlideShow] = useState(false)

  const htmlData = () => {
    return (
      <>
         <div className="slider-container">
                <div className="sliderHeader">Create Lead</div>
                <div className="sliderBody">
                    <div className="sliderLeftBox">
                      Hello World
                    </div>
                    <div className="sliderRightBox">
                      Right Box
                    </div>
                </div>
                <div className="sliderFooter">
                <button className="btn btn-primary"
                          onClick={() => setSlideShow(false)}>Cancel</button>
                </div>
            </div>
        </>

    )
  }
  return (
    <>
      <button onClick={() => { setSlideShow(!slideShow) }}>Slide Me</button>
      <Slider
      id="demoID2"
      animation="zoom"
      speed="fast"
      closeIcon={(e)=> {setSlideShow(e)}}
      toggle={slideShow}
      sliderStyle={{
           "width": "500px",
           "height": "100%",
           "top": "0px"
        }}
      closeModal={() => { setSlideShow(false)}
      direction="right"
      render={htmlData()} />
      className=""
    </>
  );
}

export default App


Example 2:

import React, { useState } from 'react';
import Slider from 'react-slider-modal';
import 'animate.css/animate.min.css'

   const sliderStyle ={{
           "width": "500px",
           "height": "400px",
           "right": "100px",
           "top": "50px"
        }
function App() {
  const [slideShow, setSlideShow] = useState(false)
  return (
    <>
      <button onClick={() => { setSlideShow(!slideShow) }}>Slide Me</button>

      <Slider id="demoID3" className="" direction ="top"
      size="medium"
      animation="slide"
      closeModal={(e)=> {setSlideShow(e)}}
      toggle={slideShow}
      closeIcon={() => { setSlideShow(false)}}
        direction="right" >
            <div className="slider-container">
                <div className="sliderHeader">Create Lead</div>
                <div className="sliderBody">
                    <div className="sliderLeftBox">
                      Hello World
                    </div>
                    <div className="sliderRightBox">
                      Right Box
                    </div>
                </div>
                <div className="sliderFooter">
                    <button className="btn btn-primary"
                            onClick={() => setSlideShow(false)}>Cancel</button>
                </div>
            </div>
      </Slider>
    </>
  );
}

export default App