open-index/open-npm huggingface dataset:
npm package: @gluedigital/react-carousel
Description: react-carousel React component
Latest version: 2.0.2

# react-carousel

A simple but customizable carousel component for React.

Can be used horizontally or vertically, with or without looping, and
with different-sized slides. It can also show any number of slides
at the same time.

## Usage

Install it on your project with:

> npm install @GlueDigital/react-carousel

Then just import it and use it like this:

```jsx
import Carousel from '@GlueDigital/react-carousel'

function MyComponent() {
  return (
    <Carousel>
      <div className="slide">Slide #1</div>
      <div className="slide">Slide #2</div>
      <div className="slide">Slide #3</div>
    </Carousel>
  )
}
```

## Options

These are the available props you can use with Carousel:

- `vertical`: boolean, make the carousel vertical
- `loop`: boolean, make the carousel loop around (ie: infinite)
- `align`: \[start|center|end\], how to align elements relative to the viewport
- `lockOnFit`: boolean, make the carousel static if all elements fit into it (instead of adding padding to align each slide)
- `dots`: component to show the "dots" indicating the current slide
- `transform`: func, add other custom transforms to the one generated by Carousel
- `id`: string, id for the wrapper div created by carousel
- `className`: string, extra className for the wrapper div created by carousel

### Transform

This component sets `c.style.transform = 'translateX(...)'` on the child
elements, so if you want to add other transforms to them, they would get
overwritten.

To fix this, you can provide a `transform` function which will receive our
translate string, and an _active index_ (number between 0 and 1 that indicates
how close to the center is the child) so you can generate the full transform.

It's easier to grasp it with an example:

```jsx
const transform = ({ baseTransform, activePercent }) => baseTransform + " scaleY(" + activePercent + ")"
// ...
return <Carousel transform={transform}>...</Carousel>
```

## Styling guide

Carousel wraps your contents with a `div.carousel-wrapper` with
`position: relative` so the slides can be positioned easily.

By default, each slide is stretched to the wrapper size so it fits exactly, but
you can override the width and height, and Carousel will calculate the right
snap points.

Please don't set `left`/`top`, as these properties are controlled by Carousel.
npm package: @gluedigital/read-more
Description: React component for collapsing and expanding a text
Author: Glue Digital
Latest version: 0.1.1

# ReadMore

React component for collapsing and expanding a text

## Usage

To install it:

> npm install --save @gluedigital/read-more

To use it:

```javascript
import ReadMore from '@gluedigital/read-more'

// ...

<ReadMore
  value={text}
  delimiter={'\n'}
  maxExcerptLength='250'
  messageReadMore={messageReadMore}
  messageReadLess={messageReadLess}
/>
```

## Options

The following props can be used:

| Name | Type | Description |
|------|------|-------------|
| value | string | Text that you want to show |
| delimiter | string | Characters that delimit how far the text collapses |
| maxExcerptLength | string | Default number by which the text will collapse if you do not find the delimiter|
| messageReadMore | string | Message displayed when the text is collapsed |
| messageReadLess | string | Message displayed when the text is expanded |

**Note**
The delimiter is replaced by a blank space when the text expands

## Developing

This package uses [nwb](https://github.com/insin/nwb) for the build. Take a look at their documentation for more info.

TL;DR: after installing nwb, just do `npm start` to open the dev environment.
npm package: @gluedigital/responsive-video
Description: React component that picks a video source based on responsive rules
Author: Glue Digital
Latest version: 0.1.0

# ResponsiveVideo

React component that picks a video source based on responsive rules

## Usage

To install it:

> npm install --save @gluedigital/responsive-video

To use it:

```javascript
import ResponsiveVideo, { ResponsiveSource } from '@gluedigital/responsive-video'

// ...

<ResponsiveVideo
  className="video"
  id="video-hero"
  ref="video"
  autoPlay muted playsInline loop>
  <ResponsiveSource
    src='/demo-mobile.mp4'
    type="video/mp4; codecs=avc1.4D401E"
    maxDeviceWidth={768} />
  <ResponsiveSource
    src='/demo-desktop.mp4'
    type="video/mp4; codecs=avc1.4D401E" />
</ResponsiveVideo>
```

## Options

The following props can be used:

**ResponsiveVideo**

| Name | Type | Description |
|------|------|-------------|
| children | [ResponsiveSource] | One or more ResponsiveSource elements |
| poster | string | Default image |


**ResponsiveSource**

| Name | Type | Description |
|------|------|-------------|
| maxDeviceWidth | number | Maximum device width |
| minDeviceWidth | number | Minimum device width |
| maxWidth | number | Maximum window width |
| maxHeight | number | Maximum window height |
| poster | string | Default image |

## Developing

This package uses [nwb](https://github.com/insin/nwb) for the build. Take a look at their documentation for more info.

TL;DR: after installing nwb, just do `npm start` to open the dev environment.
npm package: @gluedigital/scroll-carousel
Description: A library for scroll-driven vertical carousels
Latest version: 1.2.0

# scroll-carousel

A library for scroll-driven vertical carousels.

## Usage

To install it:

> npm install --save @gluedigital/scroll-carousel

To use it:

```javascript
import ScrollCarousel from '@gluedigital/scroll-carousel'
import '@gluedigital/scroll-carousel/css/index.css'

// ...

<ScrollCarousel>
  <div>First slide</div>
  <div>Second slide</div>
  <div>Last slide</div>
</ScrollCarousel>
```

## Options

The following props can be used:

| Name | Type | Description |
|------|------|-------------|
| className | string | Base classname to use. Status classes will be added to it. |
| timeout | number | How long should the leaving slide stay on the DOM, in ms. |

## Developing

This package uses [nwb](https://github.com/insin/nwb) for the build. Take a look at their documentation for more info.

TL;DR: after installing nwb, just do `npm start` to open the dev environment.