Next.js integration for Ray

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Installation

npm install next-ray

yarn add next-ray

Add your project dir path as LOCAL_PATH to your .env

Usage

This package provides a ray function that behaves like the node-ray ray function with as much next.js context as possible.

From anywhere in your project you can use the ray export to send logs to your Ray app.

import ray from 'next-ray';

ray('hello world');

client components

When working in a client react context this package provides some more advanced options.

useRay — a hook that sends the value of a variable to your Ray app when it mutates.

'use client';
import { useRay } from 'next-ray/client';

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

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

`Ray` — a component that can be wrapped around any part of your app to send it's HTML to your Ray app.
```tsx
'use client';
import { Ray } from 'next-ray/client';

export default function MyComponent({ count, increment }) {
    return (
        <Ray dependencies={[count]}>
            <button onClick={increment} className="bg-purple-500 rounded-full text-white/80">
                Increment ({count})
            </button>
        </Ray>
    );
}

useRayWithElement — a hook version of the Ray component.

'use client';
import { useRayWithElement } from 'next-ray/client';
import { forwardRef } from 'react';

export default function MyComponent({ count, increment }) {
	const ref = useRayWithElement(null, [count]);

	return (
		<button ref={ref} onClick={increment} className="bg-purple-500 rounded-full text-white/80">
			Increment ({count})
		</button>
	);
}

const MyForwardRefComponent = forwardRef(function MyComponent({ count, increment }, ref) {
	useRayWithElement(ref, [count]);

	return (
		<button ref={ref} onClick={increment} className="bg-purple-500 rounded-full text-white/80">
			Increment ({count})
		</button>
	);
});

Development

To install dependencies:

bun install

To build:

 bun build ./src/* --outdir ./dist --sourcemap=external --external '*'