react-slider-modal

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