open-index/open-npm huggingface dataset:
npm package: @leonardobetti/scroll-progress-bar
Description: A customizable scroll progress bar component for React applications
Author: Leonardo Betti
Latest version: 1.1.0

# React Scroll Progress Bar

A customizable scroll progress bar component for React applications. Built with [Tailwind CSS](https://tailwindcss.com/) and inspired by [shadcn/ui](https://ui.shadcn.com/) component patterns.

## Installation

```bash
# Install the package
pnpm add @leonardobetti/scroll-progress-bar

# Run the install script to add the component to your project
npx install-scroll-progress
```

The component will be added to your project in:
```
components/ui/scroll-progress-bar.tsx
```

## Usage

```tsx
import { ScrollProgressBar } from "@/components/ui/scroll-progress-bar"

function App() {
  return (
    <div>
      <ScrollProgressBar />
      {/* Your content */}
    </div>
  )
}
```

### Customization

You can customize the positioning and dimensions using the className prop:

```tsx
<ScrollProgressBar
  className="fixed left-0 top-0 z-50 h-2" // Custom classes for positioning and height
/>
```

### Colours

By default, the progress bar uses a Tailwind CSS gradient:
```tsx
bg-gradient-to-tr from-indigo-800 via-indigo-700 to-indigo-900
```

You can change this by:
1. Using a solid colour from [Tailwind's colour palette](https://tailwindcss.com/docs/customizing-colors)
2. Creating your own gradient using the [Tailwind Gradient Generator](https://www.creative-tim.com/twcomponents/gradient-generator)

Example with a solid colour:
```tsx
<ScrollProgressBar className="fixed left-0 top-0 z-50 h-1 bg-blue-500" />
```

Example with a custom gradient:
```tsx
<ScrollProgressBar className="fixed left-0 top-0 z-50 h-1 bg-gradient-to-r from-cyan-500 to-blue-500" />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| className | string | "fixed left-0 top-0 z-50 h-1" | Custom CSS classes for positioning and dimensions |

## Requirements

- React 16.8.0 or higher
- [Tailwind CSS](https://tailwindcss.com/) 3.0.0 or higher

## Credits

This component is built using [Tailwind CSS](https://tailwindcss.com/) and follows the component patterns established by [shadcn/ui](https://ui.shadcn.com/). 

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @leonardocabeza/the-movie-db
Description: Promised based Javascript API wrapper for https://www.themoviedb.org/ that works in the browser and nodejs
Author: Leonardo Cabeza
Latest version: 4.5.0

![npm bundle size](https://img.shields.io/bundlephobia/min/@leonardocabeza/the-movie-db?style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@leonardocabeza/the-movie-db?style=flat-square)
[![GitHub license](https://img.shields.io/github/license/leocabeza/the-movie-db.svg?style=popout)](https://github.com/leocabeza/the-movie-db/blob/master/LICENSE)
![workflow status](https://github.com/leocabeza/the-movie-db/actions/workflows/main.yml/badge.svg)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

# @leonardocabeza/the-movie-db

Promised based Javascript API wrapper for [https://www.themoviedb.org/](https://www.themoviedb.org/) that works in the browser and node.js.

It works for versions 3 and 4 of TMDB.

## Table of Contents

- [Compatibility](#compatibility)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [CDN](#cdn)
- [Contributing](#contributing)
- [Promises](#promises)

## Compatibility

It works out of the box for modern browsers and node versions greater or equal to 10.13.0

## Installation

This package is distributed via npm:

```
npm install @leonardocabeza/the-movie-db
```

## Usage

First, get an API key here: [https://www.themoviedb.org/faq/api](https://www.themoviedb.org/faq/api)

You can read the [examples folder in this repo](examples) or you can also [try it out in a REPL](https://repl.it/@leonardocabeza/TheMovieDb-usage)

## API

For more methods exposed by v3 and v4 functions, you could refer to the api docs for a full list:
* [v3 api docs](docs/v3-api.md)
* [v4 api docs](docs/v4-api.md)

## CDN

`<script crossorigin src="https://unpkg.com/@leonardocabeza/the-movie-db@latest/dist/the-movie-db.umd.js"></script>`

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md)

## Promises

`@leonardocabeza/the-movie-db` depends on a native ES6 Promise implementation to be [supported](http://caniuse.com/promises).
If your environment doesn't support ES6 Promises, you can [polyfill](https://github.com/jakearchibald/es6-promise).

## About

This product uses the TMDb API but is not endorsed or certified by TMDb.

![TMDb](https://www.themoviedb.org/assets/2/v4/logos/v2/blue_short-8e7b30f73a4020692ccca9c88bafe5dcb6f8a62a4c6bc55cd9ba82bb2cd95f6c.svg)