react-kinda-slider

React kinda slider

Usage no npm install needed!

<script type="module">
  import reactKindaSlider from 'https://cdn.skypack.dev/react-kinda-slider';
</script>

README

Kinda React slider

Draft, not optimized yet

Usage

import React from 'react';
import Carousel from 'react-kinda-slider';

const Cards = ({ items = [] }) => {
  return (
    <Carousel
      infinite
      draggable
      withControls
      items={items}
      renderItem={(item, index, realIndex) => (
        <div className='card' key={realIndex}>
          <h3>{item.title}</h3>
          <p>{item.text}</p>
        </div>
      )}
      renderControl={({ canUse, onUse, type }) => (
        <button onClick={onUse} disabled={canUse}>
          {type === 'forward' ? '>' : '<'}
        </button>
      )}
    />
  );
};

Goals

  • infinite mode for "targetIndex" prop update
  • optimization (memoize calculations)
  • refactoring
  • unit-tests