React Components

The uhrp-react library provides React components that seamlessly integrate with the Universal Hash Resolution Protocol (UHRP), allowing developers to embed images, videos, and audio in their applications using content-addressed URLs. This approach enhances content integrity and availability by leveraging decentralized storage solutions. This guide will walk you through installing and using these components in your React projects.

Prerequisites

Before integrating uhrp-react into your project, ensure you have the following:

• Node.js and npm – Installed on your system (Node v14+ recommended).
• React Project - An existing React application set up. If you don’t have one, you can create it using:

1npx create-react-app my-app
2cd my-app

Step 1: Install uhrp-react

Begin by adding the uhrp-react package to your project dependencies:

npm install uhrp-react

Step 2: Import and Use UHRP Components

The library provides components such as Img and Source that can be used to embed media files using UHRP URLs. Here’s how to use them: 

1import React from 'react';
2import { Img, Source } from 'uhrp-react';
3
4const App = () => (
5  <div>
6    <h1>UHRP Media Showcase</h1>
7
8    <div>
9      <h2>Image Preview</h2>
10      <Img src='uhrp:XUT4UwibmJijUorRuhdceFhVXvpzZYfusvC6umGFHWrCxsfBK8Eq' />
11    </div>
12
13    <div>
14      <h2>Video Preview</h2>
15      <video controls>
16        <Source src='XUSy2EHiJqRxcB3frZbfQ7J1kEe1sE8x2vB6cfUr1A6rry2AeTZX' />
17      </video>
18    </div>
19  </div>
20);
21
22export default App;

In this example:

• The Img component is used to display an image from a UHRP URL.
• The Source component is used within a video tag to embed video content from a UHRP URL. 

Step 3: Customize Component Behavior

The uhrp-react components offer several props to customize their behavior:

• loading: A React element to display while the UHRP URL is being resolved.
• confederacyHost: Specifies the confederacy host URL used for resolving the UHRP content. 

Here’s an example demonstrating these props:

1<Img
2  src='uhrp:XUT4UwibmJijUorRuhdceFhVXvpzZYfusvC6umGFHWrCxsfBK8Eq'
3  loading={<div>Loading...</div>}
4  confederacyHost='https://staging-confederacy.babbage.systems'
5/>

In this example:

• A loading message is displayed until the UHRP URL is resolved. 
• A specific confederacy host is used for resolving the content.

What’s Next?

By integrating uhrp-react components into your React application, you’ve enabled seamless embedding of media content using UHRP URLs. To further enhance your application:

• Explore Advanced Features: Dive deeper into the uhrp-react documentation to discover additional capabilities and customization options.

Happy coding!