React

Create slide toggle in react js without external library

Slide Toggle Function for react js:

function slideToggle(el, duration, callback) {
  if (el.clientHeight === 0) {
    _s(el, duration, callback, true);
  } else {
    _s(el, duration, callback);
  }
}
function slideUp(el, duration, callback) {
  _s(el, duration, callback);
}
function slideDown(el, duration, callback) {
  _s(el, duration, callback, true);
}
function _s(el, duration, callback, isDown) {
  if (typeof duration === ‘undefined’) duration = 300;
  if (typeof isDown === ‘undefined’) isDown = false;
  el.style.overflow = “hidden”;
  if (isDown) el.style.display = “block”;
  var elStyles        = window.getComputedStyle(el);
  var elHeight        = parseFloat(elStyles.getPropertyValue(‘height’));
  var elPaddingTop    = parseFloat(elStyles.getPropertyValue(‘padding-top’));
  var elPaddingBottom = parseFloat(elStyles.getPropertyValue(‘padding-bottom’));
  var elMarginTop     = parseFloat(elStyles.getPropertyValue(‘margin-top’));
  var elMarginBottom  = parseFloat(elStyles.getPropertyValue(‘margin-bottom’));
  var stepHeight        = elHeight        / duration;
  var stepPaddingTop    = elPaddingTop    / duration;
  var stepPaddingBottom = elPaddingBottom / duration;
  var stepMarginTop     = elMarginTop     / duration;
  var stepMarginBottom  = elMarginBottom  / duration;
  var start;
  function step(timestamp) {
    if (start === undefined) start = timestamp;
    var elapsed = timestamp – start;
    if (isDown) {
      el.style.height        = (stepHeight        * elapsed) + “px”;
      el.style.paddingTop    = (stepPaddingTop    * elapsed) + “px”;
      el.style.paddingBottom = (stepPaddingBottom * elapsed) + “px”;
      el.style.marginTop     = (stepMarginTop     * elapsed) + “px”;
      el.style.marginBottom  = (stepMarginBottom  * elapsed) + “px”;
    } else {
      el.style.height        = elHeight        – (stepHeight        * elapsed) + “px”;
      el.style.paddingTop    = elPaddingTop    – (stepPaddingTop    * elapsed) + “px”;
      el.style.paddingBottom = elPaddingBottom – (stepPaddingBottom * elapsed) + “px”;
      el.style.marginTop     = elMarginTop     – (stepMarginTop     * elapsed) + “px”;
      el.style.marginBottom  = elMarginBottom  – (stepMarginBottom  * elapsed) + “px”;
    }
    if (elapsed >= duration) {
      el.style.height        = “”;
      el.style.paddingTop    = “”;
      el.style.paddingBottom = “”;
      el.style.marginTop     = “”;
      el.style.marginBottom  = “”;
      el.style.overflow      = “”;
      if (!isDown) el.style.display = “none”;
      if (typeof callback === ‘function’) callback();
    } else {
      window.requestAnimationFrame(step);
    }
  }
  window.requestAnimationFrame(step);
}
export {slideUp, slideDown, slideToggle}

Use Slide Toggle function in any component:

 

import React, { useRef } from “react”;

import {slideUp, slideDown, slideToggle} from “./components/slideToggle”;

function App() {

const target = useRef();

return (
<React.Fragment>
<button onClick={() => slideUp(target.current)}>
hide
</button>
<button onClick={() => slideDown(target.current)}>
show
</button>
<button onClick={() => slideToggle(target.current)}>
toggle
</button>
<div className=’box’ ref={target}>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque
aspernatur dicta molestias, officia nulla suscipit, asperiores
praesentium tempore magni maiores impedit voluptatum esse hic minima!
Odit itaque quis consequatur mollitia. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Cumque aspernatur dicta molestias,
officia nulla suscipit, asperiores praesentium tempore magni maiores
impedit voluptatum esse hic minima! Odit itaque quis consequatur
mollitia. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Cumque aspernatur dicta molestias, officia nulla suscipit, asperiores
praesentium tempore magni maiores impedit voluptatum esse hic minima!
Odit itaque quis consequatur mollitia. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Cumque aspernatur dicta molestias,
officia nulla suscipit, asperiores praesentium tempore magni maiores
impedit voluptatum esse hic minima! Odit itaque quis consequatur
mollitia. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Cumque aspernatur dicta molestias, officia nulla suscipit, asperiores
praesentium tempore magni maiores impedit voluptatum esse hic minima!
Odit itaque quis consequatur mollitia. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Cumque aspernatur dicta molestias,
officia nulla suscipit, asperiores praesentium tempore magni maiores
impedit voluptatum esse hic minima! Odit itaque quis consequatur
mollitia.
</div>
</React.Fragment>

);
}

 

Download All mighty coders components:

https://github.com/qasim-jutt/mightycomponents

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button