How do I trigger a function at the first index of a react-elastic-carousel?

Question

I have a specific request here that is throwing me off. I'm using react-slider-carousel and when it first loads, it has padded about 45px from the left. Then on the next arrow click, it removes the padding (this is done and easy). However, it shouldn't add the padding-left until it reaches its first index. In other words, until there are no more items to the navigate back to. Once it hits the left-most item (index-0) then it adds the padding-left back so that it looks like the way it was initially loaded.

Here's an example functionality that I have right now. It all works except that first index event thing I explained

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Carousel, { consts } from "react-elastic-carousel";
import Item from "./Item";
import "./styles.css";

const breakPoints = [
  { width: 1, itemsToShow: 1 },
  { width: 550, itemsToShow: 2, itemsToScroll: 2 },
  { width: 768, itemsToShow: 3 },
  { width: 1200, itemsToShow: 4 }
];

const items = [1, 2, 3, 4, 5, 6, 7, 8];

function App() {
  const [first, setFirst] = useState(true);

  useEffect(() => {
    setFirst(true);
  }, []);

  const addPadding = () => {
    setFirst(true);
  };
  const removePadding = () => {
    setFirst(false);
  };

  const renderArrows = ({ type, onClick, isEdge }) => {
    const pointer =
      type === consts.PREV ? (
        <div
          style={{
            top: 5,
            left: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
          onClick={addPadding}
        >
          <span role="img" aria-label="">
            👈
          </span>
        </div>
      ) : (
        <div
          style={{
            top: 5,
            right: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
          onClick={removePadding}
        >
          <span role="img" aria-label="">
            👉
          </span>
        </div>
      );

    return (
      <button
        onClick={onClick}
        disabled={isEdge}
        style={{
          zIndex: 1010,
          width: 55,
          fill: "black",
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          transition: "all .8s ease-in-out !default"
        }}
      >
        {pointer}
      </button>
    );
  };

  return (
    <div className="App">
      <div className="controls-wrapper">
        <button onClick={removePadding}>Remove Padding</button>
        <button onClick={addPadding}>Add Padding</button>
      </div>
      <hr className="seperator" />
      <div className="carousel-wrapper" style={{ backgroundColor: "maroon" }}>
        <div
          style={{
            paddingLeft: first ? 45 : 15,
            paddingTop: 15,
            paddingBottom: 15,
            paddingRight: 15
          }}
        >
          <Carousel
            breakPoints={breakPoints}
            renderArrow={renderArrows}
            style={{ backgroundColor: "white" }}
          >
            {items.map((item) => (
              <Item key={item}>{item}</Item>
            ))}
          </Carousel>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here's a handy dandy code Sandbox if you need to play around with it. And thanks in advance guys

Answer 1

You could try to utilize react-elastic-carousel props, such as onNextStart and onPrevStart which could provide to previous or future items, based on that you could remove/add padding.

Solution:

1. remove click assignment on line:39 and line:56 for prev/next arrow div elements
2. add onNextStart and onPrevStart callbacks as props on <Carousel>
3. include some logic in each onNextStart and onPrevStart callback to check for index for the future item in order to drive logic for padding (add/remove padding).

Codesandbox example