<h3>React Error and Performance Monitoring</h3>
<p><img src="https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-1.png" alt="Sentry Dashboard 1"></p>
<hr>
<p><img src="https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-2.png" alt="Sentry Dashboard 2"></p>
<hr>
<p><img src="https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-3.png" alt="Sentry Dashboard 3"></p>
<hr>
<h3>Getting started is simple</h3>
<p>Grab the <a href="https://github.com/getsentry/sentry-javascript/">Sentry JavaScript SDK</a>:</p>
<pre><code>npm install @sentry/react
</code></pre>
<p>or</p>
<pre><code>yarn add @sentry/react
</code></pre>
<hr>
<p>Configure your SDK:</p>
<pre><code class="language-js"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react&quot;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react-dom&quot;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> Sentry <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;@sentry/react&quot;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./App&quot;</span>;

Sentry.init({
  <span class="hljs-attr">dsn</span>: <span class="hljs-string">&quot;__PUBLIC_DSN__&quot;</span>
});

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span> /&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;root&quot;</span>));
</code></pre>
<hr>
<p>That’s it! Check out the <a href="https://docs.sentry.io/platforms/javascript/">Sentry for JavaScript</a> and <a href="https://docs.sentry.io/platforms/javascript/guides/react/">React integration</a> documentation for more information.</p>

### React Error and Performance Monitoring

![Sentry Dashboard 1](https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-1.png)

---

![Sentry Dashboard 2](https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-2.png)

---

![Sentry Dashboard 3](https://raw.githubusercontent.com/getsentry/sentry/master/src/sentry/static/sentry/images/screenshots/thumb-3.png)

---

### Getting started is simple

Grab the [Sentry JavaScript SDK](https://github.com/getsentry/sentry-javascript/):

```
npm install @sentry/react
```
or

```
yarn add @sentry/react
```

---

Configure your SDK:

```js
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import App from "./App";

Sentry.init({
  dsn: "__PUBLIC_DSN__"
});

ReactDOM.render(<App />, document.getElementById("root"));
```

---

That’s it! Check out the [Sentry for JavaScript](https://docs.sentry.io/platforms/javascript/) and [React integration](https://docs.sentry.io/platforms/javascript/guides/react/) documentation for more information.

Sentry for React

# WebApp that reveals Character Types in a Password

Certain characters in passwords ('O' and '0', 'I' and 'l', etc.) can be hard to identify when you need to type them in (and copy-paste is unavailable).

Password Lense is a small web application that provides a quick and secure way to get a more informative view of your password

### Available in dark and light mode
![](https://storage.googleapis.com/reactshowcase.appspot.com/password-lense/dark-mode.png)
---
![](https://storage.googleapis.com/reactshowcase.appspot.com/password-lense/light-mode.png)

<h1>WebApp that reveals Character Types in a Password</h1>
<p>Certain characters in passwords (‘O’ and ‘0’, ‘I’ and ‘l’, etc.) can be hard to identify when you need to type them in (and copy-paste is unavailable).</p>
<p>Password Lense is a small web application that provides a quick and secure way to get a more informative view of your password</p>
<h3>Available in dark and light mode</h3>
<h2><img src="https://storage.googleapis.com/reactshowcase.appspot.com/password-lense/dark-mode.png" alt=""></h2>
<p><img src="https://storage.googleapis.com/reactshowcase.appspot.com/password-lense/light-mode.png" alt=""></p>

Password Lense

WebApp that reveals Character Types in a PasswordCertain characters in passwords

MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax. Based on React.

<p>MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax. Based on React.</p>

MJML

The only framework that makes responsive email easy

<p>React Invoice Generator allows you to quickly make invoices and save them as PDF.</p>
<p>It’s built with React &amp; TypeScript!</p>

React Invoice Generator allows you to quickly make invoices and save them as PDF.

It's built with React & TypeScript!

React Invoice Generator

<p>High-performance cropping, flipping, rotating, resizing, and transforming of images.</p>
<p>Doka.js is a beautiful and intuitive JavaScript image editor that works everywhere and is easy for developers to integrate.</p>
<p>Built with vanilla JavaScript and perfectly adapted for use with React.js.</p>
<h3>Enforce crop aspect ratio</h3>
<p>Enforce a single crop aspect ratio or offer a range of aspect ratio options to make sure uploaded images are always perfect.</p>
<h3>Fast image uploads</h3>
<p>Boost file upload speed and lower server bandwidth usage by compressing, resizing, and converting images in the browser.</p>
<h3>Rotate, resize and flip</h3>
<p>Make the pixel perfect crop each time. Scale images using the zoom control, mouse wheel, touchpad, or intuitive multi-touch interaction.</p>
<h3>Overlay crop guides</h3>
<p>Help your customers upload better images. Show an overlay on top of the editor to illustrate bleed margins or profile picture boundaries.</p>
<h3>Photo filter effects</h3>
<p>Apply a set of carefully crafted filter effects to your photos. Extend with your own filters and the Doka Image Editor UI will update automatically.</p>
<h3>Responsive and accessible</h3>
<p>Scales to best fit the available space. Interact with touch, mouse, and keyboard. Works great on mobile, tablet, and desktop.</p>

High-performance cropping, flipping, rotating, resizing, and transforming of images.

Doka.js is a beautiful and intuitive JavaScript image editor that works everywhere and is easy for developers to integrate.

Built with vanilla JavaScript and perfectly adapted for use with React.js.

### Enforce crop aspect ratio
Enforce a single crop aspect ratio or offer a range of aspect ratio options to make sure uploaded images are always perfect.

### Fast image uploads
Boost file upload speed and lower server bandwidth usage by compressing, resizing, and converting images in the browser.

### Rotate, resize and flip
Make the pixel perfect crop each time. Scale images using the zoom control, mouse wheel, touchpad, or intuitive multi-touch interaction.

### Overlay crop guides
Help your customers upload better images. Show an overlay on top of the editor to illustrate bleed margins or profile picture boundaries.

### Photo filter effects
Apply a set of carefully crafted filter effects to your photos. Extend with your own filters and the Doka Image Editor UI will update automatically.

### Responsive and accessible
Scales to best fit the available space. Interact with touch, mouse, and keyboard. Works great on mobile, tablet, and desktop.

Doka.js

<p>Customer-centric e-commerce on a modern stack: Saleor is a headless, GraphQL-first e-commerce platform delivering ultra-fast, dynamic, personalized shopping experiences.</p>
<p>Beautiful online stores, anywhere, on any device.</p>

Customer-centric e-commerce on a modern stack: Saleor is a headless, GraphQL-first e-commerce platform delivering ultra-fast, dynamic, personalized shopping experiences.

Beautiful online stores, anywhere, on any device.

Saleor

<p>Readflow lets you collect articles from anywhere in one place, and save them for offline reading. It also helps you categorize new articles automatically.</p>
<p>Readflow is a PWA made with React, Typescript, Golang &amp; GraphQL.</p>

Readflow lets you collect articles from anywhere in one place, and save them for offline reading. It also helps you categorize new articles automatically.

Readflow is a PWA made with React, Typescript, Golang & GraphQL.

Readflow

<p>BlueWallet is a Bitcoin thin client for iOS &amp; Android, focused on security and user experience.</p>
<p>It’s an open source project built with React Native by bitcoiners, by community members, by hodlers, by bitcoin maximalists.</p>

BlueWallet is a Bitcoin thin client for iOS & Android, focused on security and user experience.

It's an open source project built with React Native by bitcoiners, by community members, by hodlers, by bitcoin maximalists.

BlueWallet

<p>React PDF Viewer is a component written in Typescript to view PDF documents.</p>
<p>It lets users open, search, copy, bookmark, rotate, navigate through documents or view them in full-screen mode. React PDF Viewer also supports SSR, UI localization, and password-protected documents.</p>

React PDF Viewer is a component written in Typescript to view PDF documents.

It lets users open, search, copy, bookmark, rotate, navigate through documents or view them in full-screen mode. React PDF Viewer also supports SSR, UI localization, and password-protected documents.

React Showcase