How to use addFilter() with react-slick?

I’m developing with react. And I want to use sliders, so I decided to use a library called “react-slick”.

I used to use a library called “slick” in a place other than React’s development environment. “slick” had methods for adding, removing, and filtering elements to sliders, such as slickAdd(), slickRemove(), and slickFilter(). However, it looks like this hasn’t been implemented yet in react-slick.

I mainly want to use SlickFilter(), how should I implement this?

---

The demo page of react-slick is here, but unfortunately there is no demo about filter.

https://react-slick.neostack.com/docs/example/simple-slider

On the other hand, even on slick, there is a demo titled “Filtering” on the page.

http://kenwheeler.github.io/slick/

Answer

You should decide when rendering your slide items based on the filters you want, for example this code filter slides if we click to toggle view of slides with odd number:

import React, { useState } from "react";
import Slider from "react-slick";


export default function App() {
  const [isOdd, setOdd] = useState(false);
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  let Slides = [
    <div key="1">
      <h3>1</h3>
    </div>,
    <div key="2">
      <h3>2</h3>
    </div>,
    <div  key="3">
      <h3>3</h3>
    </div>,
    <div key="4">
      <h3>4</h3>
    </div>,
    <div>
      <h3>5</h3>
    </div>,
    <div>
      <h3>6</h3>
    </div>
  ];
  return (
    <div>
      <h2> Single Item</h2>
      <Slider {...settings}>
        {Slides.map((item, key) => {
          if (isOdd) {
            return key % 2 === 0 ? item : null;
          }
          return item;
        })}
      </Slider>
      <hr />
      <button onClick={() => setOdd(!isOdd)}>toggle</button>
    </div>
  );