Using Ray with React

React is a JavaScript library for building user interfaces. Use Ray to help you debug when developing React applications and components.

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 are available when using React.

What's next?

Now that Ray is installed in your React project, see what you can use it for.

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

Licenses are valid for 1 year and managed through Spatie. Licenses purchased before Ray 3 remain valid. VAT is calculated at checkout.

Thanks for trying out Ray!

macOS

ARM Intel

Windows

x86 (Intel)

Linux

AppImage

By downloading Ray, you agree to our terms of use.
The free trial lets you send up to 20 messages per session.