react-slider-module v0.0.1

##React-Slider-Module

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

Installation via NPM

npm install react-slider-module

npm install animation.css

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

Usage

import {slider} from 'react-slider-module';

<Slider htmlData={...} id="" direction="right" />

Props

• sliderStyle- set the style of slider by using css,
• id - set the id of this slider
• 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
• onSlide - function that take state of slider true/false
• htmlData - pass the html data as a function , component
• animation - change animation on slider like- fade, zoom, bounce, slide; default it is slide

##Example:

import React, { useState } from 'react-slider-module';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'animate.css/animate.min.css'

const sliderStyle = {
  "width": "500px",
  "height": "50%",
  "left": "40px",
  "top": "50px"
}

function App() {
  const [slideShow, setSlideShow] = useState(false)
  const slideClose = (e) => {
    setSlideShow(e)
  }
  const htmlData = () => {
    return (
      <div>
         <header className="sliderHeader">Create Header</header>
          <div className="sliderBody">
          <input className="form-control" placeholder="Name" type="text" />
          <input className="form-control" placeholder="Email" type="text" />
          <input className="form-control" placeholder="Password" type="text" />
          </div>
            <footer className="sliderFooter">
                <button className="btn btn-primary mx-2">Submit</button>
                <button className="btn btn-primary" onClick={() => { slideClose(false) }}>Cancel</button>
            </footer>
        </div>
      </div>
    )
  }
  return (
    <React.Fragment>
      <div className="App container-flex">
        <div className="row">
          <div className="col-sm-2">
            <button className="btn btn-sm btn-primary" id="slideBtn"
             onClick={() => { setSlideShow(!slideShow) }}>Slide Me</button>
          </div>
        </div>
      </div>
      <Slider id="demoID2" targetBtn='slideBtn' animation="zoom" speed="fast" toggle={slideShow} sliderStyle={sliderStyle} onSlide={slideClose} direction="top" htmlData={htmlData()} />
    </React.Fragment>
  );
}

export default App;