Blockpipe React

Blockpipe React is a TypeScript library for React applications that provides a custom hook for easily and seamlessly fetching data from Blockpipe Endpoint API. It supports polling and updating the data automatically when new data is available. By using React Context, you can configure the package with your project and API settings.

Installation

Install the package using npm or yarn:

npm install @blockpipe/react --save

or

yarn add @blockpipe/react

Usage

1. Import BlockpipeProvider and wrap your components with it:

import { BlockpipeProvider } from "@blockpipe/react";

const App = () => {
  return (
    <BlockpipeProvider project="YOUR_PROJECT">
      {/* Your components using useBlockpipe */}
    </BlockpipeProvider>
  );
};

2.Import and use the useBlockpipe hook in your components:

import { useBlockpipe } from "@blockpipe/react";

const MyComponent = () => {
  const { loading, data, error } = useBlockpipe(["/path1", "/path2"]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data from /path1: {data?.[0]}</h1>
      {/* Render data[0] */}
      <h1>Data from /path2: {data?.[0]}</h1>
      {/* Render data[1] */}
    </div>
  );
};

If you query only one path, you can access the data directly.

import { useBlockpipe } from "@blockpipe/react";

const MyComponent = () => {
  const { loading, data, error } = useBlockpipe("/path");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data from /path: {data}</h1>
    </div>
  );
};

API

BlockpipeProvider

Wrap your components with the BlockpipeProvider and provide the required configurations.

Props:

• project: The project slug.
• environment (optional): The deployment environment. Default is "production".
• pollingInterval (optional): Polling interval in milliseconds. Default is 10000 (10 seconds).
• baseUrl (optional): The base URL for the API. Default is "https://app.blockpipe.io/endpoint".

useBlockpipe

A custom React hook for fetching data from Blockpipe Endpoint API.

Arguments:

• endpoints: An array of endpoint paths or a single endpoint path as a string.

Returns:

• loading: A boolean indicating whether the data is still loading.
• data: An array of data fetched from the specified endpoints or null if not yet loaded.
• error: An Error object if there was an error while fetching data, or null if no error occurred.

License

Apache 2.0