# carousel-lit

> Lit carousel component written in React

Latest version **0.4.6** (published 2020-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install carousel-lit
pnpm add carousel-lit
yarn add carousel-lit
bun add carousel-lit
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.6 |
| Published | 2020-09-26 |
| First published | 2020-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 40.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Joel Voss |
| Maintainers | joelvoss |

## Links

- npm: https://www.npmjs.com/package/carousel-lit
- Repository: https://github.com/joelvoss/carousel-lit
- Issues: https://github.com/joelvoss/carousel-lit/issues
- npm.io page: https://npm.io/package/carousel-lit

## Dependencies (6)

- [raf-schd](https://npm.io/package/raf-schd.md) 4.0.2
- [memoize-one](https://npm.io/package/memoize-one.md) 5.1.1
- [@emotion/core](https://npm.io/package/@emotion/core.md) 10.0.35
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.11.2
- [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) 0.4.4
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) 1.5.1

## Recent versions

- 0.4.6 (latest) — 2020-09-26
- 0.4.5 — 2020-07-14
- 0.4.4 — 2020-06-23
- 0.4.3 — 2020-06-10
- 0.4.2 — 2020-06-02
- 0.4.1 — 2020-05-25
- 0.4.0 — 2020-05-22
- 0.3.0 — 2020-05-02
- 0.2.2 — 2020-04-09
- 0.2.1 — 2020-03-13
- 0.2.0 — 2020-02-26
- 0.1.0 — 2020-02-24
- 0.0.4 — 2020-02-24
- 0.0.3 — 2020-02-22
- 0.0.2 — 2020-02-11

## README

# carousel-lit

Lit carousel component written in React.

## Install

```text
npm install carousel-lit  OR  yarn add carousel-lit
```

## Example

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel, Track, Previous, Next } from 'carousel-lit';

const items = [
  { id: 'id-0', color: 'aliceblue' },
  { id: 'id-1', color: 'antiquewhite' },
  { id: 'id-2', color: 'aqua' },
];

const itemStyle = {
  flex: '0 0 200px',
  width: '200px',
  height: '150px',
};

const App = () => {
  return (
    <Carousel>
      {/*
        Pass your items to the <CarouselTrack> component and leverage the
        render prop api to render your custom carousel item.
      */}
      <Track data={items}>
        {({ entry, index, first, last }) => (
          <div
            key={`${entry.id}-${index}`}
            style={{
              ...itemStyle,
              backgroundColor: entry.color,
              margin: `${last ? '0' : '0 0.25rem 0 0'}`,
            }}
          >
            I am {entry.color}
          </div>
        )}
      </Track>

      {/*
        Render previous and next buttons wherever you like as long as they
        are a decendent of <Carousel>
      */}
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Previous>{'←'}</Previous>
        <Next>{'→'}</Next>
      </div>
    </Carousel>
  );
};

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

Have a look inside the `example/` directory to learn more about possible usage
patterns.

> Note: This component requires and includes both `resize-observer-polyfill` and
> `smoothscroll-polyfill`.

## API

> Under construction

## Local development

1. Clone this repository and install it's dependencies

   ```bash
   # Using npm
   npm install

   # Using yarn
   yarn
   ```

2. Validate project setup

   ```bash
   ./Taskfile.sh validate
   ```

3. Navigate into the `example/` folder to start your local development
   environment.

   ```bash
   cd ./example

   # Using npm
   npm install && npm start

   # Using yarn
   yarn && yarn start
   ```

   This will start a simple React application powered by Parcel on `http://localhost:1234`.

---

This project was bootstrapped with [jvdx](https://github.com/joelvoss/jvdx).

---
_Source: https://npm.io/package/carousel-lit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._