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>
Copy

Installation

Then, install the package:

npm install react-streaming-availability
Copy

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",
		  })}
	  />
  );
}
Copy

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,
			})}
		/>
	);
}
Copy

Guide

You can find a detailed guide here: https://docs.movieofthenight.com/guide/widget