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.

Demo

ReactStreamingAvailabilityDemo.mov

Code available at: https://github.com/movieofthenight/react-streaming-availability/tree/main/demo/nextjs

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