# Using Ray with React

[React](https://react.dev/) is a JavaScript library for building user interfaces. Use Ray to help you debug when developing React applications and components.

[permafrost-dev/react-ray](https://github.com/permafrost-dev/react-ray)

## Installing the package

```
npm install react-ray
```

```
yarn add react-ray
```

## Using the hooks

This integration supports React 16+ and provides two hooks:

### useRay

Send data to the Ray app whenever it updates.

```
import { useRay } from 'react-ray';

function MyComponent() {
    const [count, setCount] = useState(0);

useRay(count);

return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}
```

### useRayWithElement

Send the contents of an element ref to the Ray app, optionally updating the item in place when its dependencies change.

```
import { useRef } from 'react';
import { useRayWithElement } from 'react-ray';

function MyComponent() {
    const elementRef = useRef(null);

useRayWithElement(elementRef, []);

return (
        <div ref={elementRef}>
            Content to send to Ray
        </div>
    );
}
```

## Usage

All [JavaScript methods](/content/docs/javascript/vanilla-javascript/usage/index.html) are available when using React.

> ## What's next?
>
> Now that Ray is installed in your React project, see what you can use it for.
>
> - [Learn how to use Ray with JavaScript](/content/docs/javascript/vanilla-javascript/usage/index.html)
> - [View all available methods](/content/docs/javascript/vanilla-javascript/reference/index.html)

## Debug without breaking your flow

Ray keeps all your debug output neatly organized in a dedicated desktop app.

Download Ray

[Buy Ray for\49 USD](https://spatie.be/products/ray)

Licenses are valid for 1 year and managed through [Spatie](https://spatie.be/products/ray). Licenses purchased before Ray 3 remain valid. VAT is calculated at checkout.

## Thanks for trying out Ray!

macOS

[ARM](https://spatie.be/products/ray/v3/download/macos-arm64/latest) [Intel](https://spatie.be/products/ray/v3/download/macos-x64/latest)

Windows

[x86 (Intel)](https://spatie.be/products/ray/v3/download/windows/latest)

Linux

[AppImage](https://spatie.be/products/ray/v3/download/linux/latest)

By downloading Ray, you agree to our [terms of use](/content/terms-of-use/index.html).  
The free trial lets you send up to 20 messages per session.