# @upstash/react-databrowser

> Databrowser for Upstash Redis

Latest version **0.3.20** (published 2024-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @upstash/react-databrowser
pnpm add @upstash/react-databrowser
yarn add @upstash/react-databrowser
bun add @upstash/react-databrowser
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.20 |
| Published | 2024-08-22 |
| First published | 2023-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 207.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Oguzhan Olguncu |
| Maintainers | fahreddin.ozcan, hezarfen, buggyhunter, upstashnpm, ademilter-upstash, mdogan |

## Links

- npm: https://www.npmjs.com/package/@upstash/react-databrowser
- Homepage: https://github.com/upstash/react-ui#readme
- Issues: https://github.com/upstash/react-ui/issues
- npm.io page: https://npm.io/package/@upstash/react-databrowser

## Dependencies (14)

- [@upstash/redis](https://npm.io/package/@upstash/redis.md) ^1.31.6
- [@monaco-editor/react](https://npm.io/package/@monaco-editor/react.md) ^4.6.0
- [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2
- [@radix-ui/react-icons](https://npm.io/package/@radix-ui/react-icons.md) 1.3.0
- [@radix-ui/react-label](https://npm.io/package/@radix-ui/react-label.md) ^2.0.2
- [@radix-ui/react-toast](https://npm.io/package/@radix-ui/react-toast.md) ^1.1.5
- [@tanstack/react-query](https://npm.io/package/@tanstack/react-query.md) ^5.32.0
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.0.7
- [@radix-ui/react-separator](https://npm.io/package/@radix-ui/react-separator.md) ^1.0.3
- [@radix-ui/react-scroll-area](https://npm.io/package/@radix-ui/react-scroll-area.md) ^1.0.3
- [@radix-ui/react-alert-dialog](https://npm.io/package/@radix-ui/react-alert-dialog.md) ^1.0.5

## Recent versions

- 0.3.20 (latest) — 2024-08-22
- 0.3.19 — 2024-07-15
- 0.3.18 — 2024-07-02
- 0.3.17 — 2024-06-26
- 0.3.16 — 2024-06-20
- 0.3.15 — 2024-06-12
- 0.3.14 — 2024-06-10
- 0.3.13 — 2024-05-27
- 0.3.12 — 2024-05-24
- 0.3.11 — 2024-05-23
- 0.3.10 — 2024-05-16
- 0.3.9 — 2024-05-03
- 0.3.8 — 2024-04-25
- 0.3.7 — 2024-04-16
- 0.3.6 — 2024-04-16
- … 24 more at https://npm.io/package/@upstash/react-databrowser/versions

## README

# @upstash/react-databrowser

<p align="center">
    <h2 align="center">Databrowser for Upstash Redis</h2>
</p>

<p align="center">
    <a href="https://upstash-react-cli.vercel.app/">Explore the demo application</a>
</p>

---

## Introduction

`@upstash/react-databrowser` is a React component that provides a UI for browsing data in your Upstash Redis instances. It’s easy to set up and integrate into your React applications. This guide will help you get started with the installation and basic usage.

## Table of Contents

- [Install](#1-install)
- [Configuration](#2-configuration)
- [Usage](#3-usage)

## 1. Install

Install the databrowser component via npm:

```sh-session
$ npm install @upstash/react-databrowser
```

## 2. Configuration

### Environment Variables
Configure your Upstash Redis REST URL and token as environment variables:

```sh-session
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=YOUR_REDIS_REST_URL
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=YOUR_REDIS_REST_TOKEN
```
## 3. Usage
### Creating the Data Browser Component

In your React application, create a new component that will utilize @upstash/react-databrowser.

Here's a basic example of how to use the component:

```tsx
// /app/components/DatabrowserDemo.tsx

import { Databrowser } from "@upstash/react-databrowser";
import "@upstash/react-databrowser/dist/index.css";

export default function DatabrowserDemo() {
  const redisUrl = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_URL;
  const redisToken = process.env.NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN;

  return (
    <main style={mainStyle}>
      <div style={divStyle}>
        <Databrowser token={redisToken} url={redisUrl}/>
      </div>
    </main>
  );
}

const mainStyle = {
  height: "100vh",
  width: "100vw",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "column",
  background: "rgb(250,250,250)",
};

const divStyle = {
  height: "100%",
  width: "100%",
  maxHeight: "45rem",
  maxWidth: "64rem",
  borderRadius: "0.5rem",
  overflow: "hidden",
};

```

---
_Source: https://npm.io/package/@upstash/react-databrowser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._