# React Components

Canonical: https://docs.projectbabbage.com/docs/guides/storage/react-components

Embedding UHRP images and videos into your react applications 

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:

```bash
npx create-react-app my-app
cd 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: 

```
import React from 'react';
import { Img, Source } from 'uhrp-react';

const App = () => (
  <div>
    <h1>UHRP Media Showcase</h1>

    <div>
      <h2>Image Preview</h2>
      <Img src='uhrp:XUT4UwibmJijUorRuhdceFhVXvpzZYfusvC6umGFHWrCxsfBK8Eq' />
    </div>

    <div>
      <h2>Video Preview</h2>
      <video controls>
        <Source src='XUSy2EHiJqRxcB3frZbfQ7J1kEe1sE8x2vB6cfUr1A6rry2AeTZX' />
      </video>
    </div>
  </div>
);

export 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:

```
<Img
  src='uhrp:XUT4UwibmJijUorRuhdceFhVXvpzZYfusvC6umGFHWrCxsfBK8Eq'
  loading={<div>Loading...</div>}
  confederacyHost='https://staging-confederacy.babbage.systems'
/>
```

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!