react-streaming-availability
v0.1.4
Published
A React component library to display streaming availability data for movies and TV shows including deep links
Downloads
375
Readme
Streaming Availability React Components
Streaming Availability React Components is a set of React components that allow you to display streaming availability information for movies and TV shows; with posters and deep links to streaming services.
It uses Streaming Availability API to fetch the data.
It is designed to be used in React applications with any framework that supports "use server" directive such as Next.js.
Getting Started
API Key
First, you need an API key to use the Streaming Availability React Components. It's free to get it without any credit card information.
To get one, please follow the instructions in the Authorization Guide.
Once you have an API key,
you need to add it as an environment variable called STREAMING_AVAILABILITY_API_KEY
.
If you are using Next.js, you can create a .env
file in the root of the project
and add your API key as follows (replace <your-api-key>
with your
actual API key):
STREAMING_AVAILABILITY_API_KEY=<your-api-key>
Installation
Then, install the package:
npm install react-streaming-availability
Usage
Row
The Row
component displays a row of movies or TV shows.
import { Row, newTopShowsSource } from 'react-streaming-availability';
export default function MyComponent() {
return (
<Row
title="Netflix US Top 10 Series"
posterType="vertical"
source={newTopShowsSource({
country: "us",
showType: "series",
service: "netflix",
})}
/>
);
}
Grid
The Grid
component displays a grid of movies or TV shows.
import { Grid, newFilteredSearchSource } from 'react-streaming-availability';
export default function MyComponent() {
return (
<Grid
source={newFilteredSearchSource({
country: "us",
orderBy: "popularity_1year",
orderDirection: "desc",
limit: 100,
})}
/>
);
}
Guide
You can find a detailed guide here: https://docs.movieofthenight.com/guide/widget