SimpleCarousel

@arranjae/react-simple-carousel

React Simple Carousel

Minimum requirement

• React.js >= 16.3.0 (new context API + forward ref)

Getting started

npm install @arranjae/react-simple-carousel

or

yarn add @arranjae/react-simple-carousel

<SimpleCarousel list<ItemType[]>={[]} />

Create a responsive carousel with this component passing items array.

<iframe src="https://codesandbox.io/embed/nameless-brook-uessi?fontsize=14&hidenavigation=1&theme=dark&view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="nameless-brook-uessi" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

Props

interface CarouselProps {
  list: Array<ItemType>;
  wrapperClasses?: string | string[] | any;
  showBullets?: boolean;
  customButtons?: {
    next: React.ElementType;
    prev: React.ElementType;
  };
}

Usage

<SimpleCarousel list={[{
  content: <div> Item </div>
}]}>

<ItemType[]>

This prop receive a array of items typeof ItemType

interface ItemType {
  content: JSX.Element;
  onClickItem?: Function;
  itemCustomClass?: ClassValue[] | any;
}

Simple Example (JSX/TSX)

See in folder examples/my-carousel a example using create-react-app

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// App.jsx
import React from 'react';
import { SimpleCarousel } from '@arranjae/react-simple-carousel';
import '@arranjae/react-simple-carousel/src/styles.scss';

const App = () => {
  return (
    <div>
      <h1>
        Its works!!
        <br /> We have a wonderfull carousel!
      </h1>
      <SimpleCarousel
        list={[
          {
            content: (
              <div className="box-item">
                <h1>Box Item 1</h1>
                <p>Box in my carousel</p>
              </div>
            ),
          },
          {
            content: (
              <div className="box-item">
                <h1>Box Item 2</h1>
                <p>Box in my carousel</p>
              </div>
            ),
          },
          {
            content: (
              <div className="box-item">
                <h1>Box Item 3</h1>
                <p>Box in my carousel</p>
              </div>
            ),
          },
          {
            content: (
              <div className="box-item">
                <h1>Box Item 4</h1>
                <p>Box in my carousel</p>
              </div>
            ),
          },
        ]}
      />
    </div>
  );
};

export default App;

Thankyou!