# react-carousel-table

> React component of Carousel inside a table styled in bootstrap

Latest version **1.0.0** (published 2019-06-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-carousel-table
pnpm add react-carousel-table
yarn add react-carousel-table
bun add react-carousel-table
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-06-10 |
| First published | 2019-06-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Santoshkumar Yadav |
| Maintainers | syadav214 |
| Keywords | carousel, table, reactjs, js, bootstrap |

## Links

- npm: https://www.npmjs.com/package/react-carousel-table
- Repository: https://github.com/syadav214/react-carousel-table
- Homepage: https://github.com/syadav214/react-carousel-table#readme
- Issues: https://github.com/syadav214/react-carousel-table/issues
- npm.io page: https://npm.io/package/react-carousel-table

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-06-10

## README

# react-carousel-table

React component of Carousel inside a table styled in bootstrap 


## Example


![alt text](https://user-images.githubusercontent.com/24729891/59196519-93b10b00-8bac-11e9-9110-0f2f6bfd0df7.png)

```html
<!-- Put bootstrap cdn link (like below) in index.html of your React App -->
<!-- Latest compiled and minified CSS -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
  crossorigin="anonymous"
/>
```

```jsx
import React, { Component } from 'react';
import 'font-awesome/css/font-awesome.min.css';
import Carousel from 'react-carousel-table';

const images = [
  {
    id: '1',
    url:
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    id: '2',
    url:
      'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
  }
];

class App extends Component {
  render() {
    return (
      <div>
        <div className="container">
          <br />
          Carousel in a Table
          <br />
          <table className="table" style={{ width: '80%' }}>
            <tbody>
              <tr>
                <td>Demo</td>
                <td>
                  <Carousel images={images} pxs={100} />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default App;
```

## Install

```cli
npm install react-carousel-table
npm install font-awesome
```

## Props

##### `images`

An array of object with properties like 'id' and 'url'.
```js
const images = [
  {
    id: '1',
    url:
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500'
  },
  {
    id: '2',
    url:
      'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
  }
];
```

---

##### `pxs`

Sets the width and height of image box.


## License

MIT

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