@bobbynicholson78704/tpl-react-barebones v0.1.70

TPL REACT UNSTYLED COMPONENT LIBRARY

Clone this repository and run npm run storybook to start the storybook.

Components are available in the src directory.

Stories are available in the stories directory.

To Install this as a package: npm i @bobbynicholson78704/tpl-react-barebones

Link to package: @bobbynicholson78704/tpl-react-barebones

Link to GitHub: https://github.com/SelfTaughtCoder78704/tplReactPackage

Link to StoryBook Live: https://tpl-react-storybook.netlify.app/

Glide Template:

import React, { useEffect, useRef, useState } from 'react';
import Glide from '@glidejs/glide';


export const Glider = (props) => {
  const { id, classes, slides, glideOptions, arrows, bullets, mbPoint, tbPoint } = props;
  const [numSlides, setNumSlides] = useState(glideOptions.perView);

  const carouselRef = useRef(null);

  useEffect(() => {
    // Grab correct ref = element with glider
    if (carouselRef.current) {
      let glider = new Glide(carouselRef.current, {
        ...glideOptions,
      })
      // disable functionality
      function disableIt() {
        glider.disable();
      }


      // USED FOR AFTER MOUNTING
      glider.on('mount.after', function () {

        let tabletPerView = glideOptions.breakpoints[tbPoint].perView;
        let mobilePerView = glideOptions.breakpoints[mbPoint].perView;

        // YOUR LOGIC GOES HERE FOR CHECKING ON LOAD IF YOU NEED TO DISABLE *********************
        // EXAMPLE:
        if (window.innerWidth <= mbPoint) {
          setNumSlides(mobilePerView);
          // call disableIt function if we arent on mobile
          // disableIt()
          console.log(mbPoint)
        } if (window.innerWidth < tbPoint) {
          setNumSlides(tabletPerView);
          // call disableIt function if we arent on tablet
          // disableIt()
          disableIt();
          console.log(tbPoint)
        }
        if (window.innerWidth > tbPoint) {
          setNumSlides(glideOptions.perView);
          // call disableIt function if we arent on desktop
          // disableIt()
          glider.disabled = false;

        }
        console.log(numSlides)

        // *****************************************************************************************
      })


      // // HELPFUL FOR WHEN SLIDES CHANGE CAN ALSO BE USEFUL WHEN CREATING CUSTOM INTERFACES
      // EXAMPLE:
      // glider.on('run', function () {
      // YOUR LOGIC GOES HERE FOR CHECKING ON LOAD IF YOU NEED TO DISABLE *********************
      // EXAMPLE:
      //   custom button to add active class to
      //    ... <code goes here> ........................
      // })


      // USED FOR RESIZING
      glider.on('resize', function () {

        let tabletPerView = glideOptions.breakpoints[tbPoint].perView;
        let mobilePerView = glideOptions.breakpoints[mbPoint].perView;

        // YOUR LOGIC GOES HERE FOR CHECKING ON LOAD IF YOU NEED TO DISABLE *********************
        // EXAMPLE:
        if (window.innerWidth <= mbPoint) {
          setNumSlides(mobilePerView);
          // call disableIt function if we arent on mobile
          // disableIt()
          console.log(mbPoint)
        } if (window.innerWidth < tbPoint) {
          setNumSlides(tabletPerView);
          disableIt();
          // call disableIt function if we arent on tablet
          // disableIt()
          console.log(tbPoint)
        }
        if (window.innerWidth > tbPoint) {
          setNumSlides(glideOptions.perView);
          // call disableIt function if we arent on desktop
          // disableIt()


        }
        // *****************************************************************************************

      })
      // mount glide
      glider.mount();
    }
    // depencencies (checking when numSlides changes)
  }, [numSlides, mbPoint, tbPoint, glideOptions]);



  return (
    <div className="carousel" id={id ? id : ''}>
      <div ref={carouselRef} className={classes ? classes + ' glide' : 'glide'}>
        <div className="glide__track" data-glide-el="track">
          <div className="glide__slides">
            {slides?.map((slide, index) => {
              return (
                <div className="glide__slide" key={index}>
                  {slide}
                </div>
              );
            })}
          </div>
        </div>
        {arrows && <div className="glide__arrows" data-glide-el="controls">
          <button
            className="glide__arrow glide__arrow--left"
            data-glide-dir="<"
          >
            <i className="fas fa-angle-left"></i>
          </button>
          <button
            className="glide__arrow glide__arrow--right"
            data-glide-dir=">"
          >
            <i className="fas fa-angle-right"></i>
          </button>
        </div>}
        {bullets && <div className="glide__bullets" data-glide-el="controls[nav]">
          {slides?.map((slide, index) => {
            return (
              <button
                className={
                  slide?.classes
                    ? slide?.classes + ' glide__bullet'
                    : 'glide__bullet'
                }
                key={index}
                data-glide-dir={`=${index}`}
              >
                GO
              </button>
            );
          })}
        </div>}
      </div>
    </div>
  );
};

How a Glide Element Looks:

 <Glider
      id="carousel"
      classes="carousel"
      // slides is an array of JSX elements

      mbPoint={768}
      tbPoint={1024}
      slides={[...json.slides.map(slide => <RenderHTML htmlPart={slide} classes="slide" />)]}
      arrows={true}
      glideOptions={{
        type: "carousel",
        perView: 3,
        gap: 10,
        autoplay: 3000,
        breakpoints: {
          1024: {
            perView: 2,
          },
          768: {
            perView: 1,
          },
        },

      }}
    />