{"id":21466567,"url":"https://github.com/permafrost-dev/react-ray","last_synced_at":"2025-07-15T05:30:50.318Z","repository":{"id":138555194,"uuid":"608424968","full_name":"permafrost-dev/react-ray","owner":"permafrost-dev","description":"Official React integration for the Ray app.","archived":false,"fork":false,"pushed_at":"2024-10-21T20:53:18.000Z","size":227,"stargazers_count":11,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T18:37:51.288Z","etag":null,"topics":["ray-app","react","react-hooks","spatie"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/permafrost-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"permafrost-dev","custom":"https://permafrost.dev/open-source"}},"created_at":"2023-03-02T01:38:00.000Z","updated_at":"2024-07-08T20:44:20.000Z","dependencies_parsed_at":"2023-11-11T01:29:51.025Z","dependency_job_id":"30ed1d22-ac0a-4645-b6bb-78e4cd559f8c","html_url":"https://github.com/permafrost-dev/react-ray","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"permafrost-dev/typescript-project-skeleton-rollup-jest","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permafrost-dev%2Freact-ray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permafrost-dev%2Freact-ray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permafrost-dev%2Freact-ray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/permafrost-dev%2Freact-ray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/permafrost-dev","download_url":"https://codeload.github.com/permafrost-dev/react-ray/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226017177,"owners_count":17560466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ray-app","react","react-hooks","spatie"],"created_at":"2024-11-23T08:14:37.430Z","updated_at":"2024-11-23T08:14:38.586Z","avatar_url":"https://github.com/permafrost-dev.png","language":"JavaScript","funding_links":["https://github.com/sponsors/permafrost-dev","https://permafrost.dev/open-source"],"categories":[],"sub_categories":[],"readme":"# react-ray\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://repository-images.githubusercontent.com/608424968/dbda5ed6-2a32-43ed-ac01-e665ae6bda6f\" height=\"420\" alt=\"card\"\u003e\n\u003c/p\u003e\n\nThe official React integration for the [Ray app](https://myray.app) by [Spatie](https://github.com/spatie/ray).\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/permafrost-dev/react-ray/run-tests.yml?branch=main\u0026label=tests\u0026logo=github\u0026style=flat-square\" alt=\"test status\"\u003e\n    \u003cimg src=\"https://shields.io/npm/v/react-ray?style=flat-square\u0026nocache=1\" alt=\"npm version\"\u003e\n    \u003cimg src=\"https://shields.io/github/license/permafrost-dev/react-ray?style=flat-square\u0026nocache=1\" alt=\"license\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/permafrost-dev/react-ray/branch/main/graph/badge.svg?token=5LmCr9EgqH\" alt=\"coverage\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nYou can install the package via npm:\n\n```bash\nnpm install react-ray\n```\n\n## Usage\n\n`react-ray` supports React 16+ and provides several hooks:\n\n- `useRay` - send data to the Ray app whenever it updates.\n- `useRayWithElement` - send the contents of an element ref to the Ray app, optionally updating the item in place when its dependencies change.\n- `useRayInstance` - access the Ray instance directly.\n\n### `useRay()`\n\nTo send data to Ray whenever it updates, use the `useRay` hook along with the `type` option to specify the type of data you are sending.  The `boolean` `replace` option can be used to update the Ray item in place when its dependencies change.  The default value for `replace` is `false`.\n\nValid types are `image`, `json`, `html`, `text`, or `xml`. See the [`node-ray` documentation](https://github.com/permafrost-dev/node-ray) for more information on these types.\n\n```js\nimport { useRay } from 'react-ray';\nimport { useEffect, useState } from 'react';\n\nconst MyComponent = () =\u003e {\n    const [count, setCount] = useState(0);\n\n    useRay(count, { type: 'text', replace: true });\n\n    return (\n        \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n            Click me\n        \u003c/button\u003e\n    );\n};\n```\n\n### `useRayWithElement()`\n\nTo send the contents of a ref to the Ray app in a sequential manner (each dependency change sends a new item), set the `replace` option to `false`:\n\n```js\nimport { useRayWithElement } from 'react-ray';\nimport { useRef, useState } from 'react';\n\nconst MyComponent = () =\u003e {\n    const [count, setCount] = useState(0);\n    const countRef = useRef(null);\n\n    useRayWithElement(countRef, [count], { replace: false });\n\n    return (\n        \u003cdiv\u003e\n            \u003cdiv ref={countRef}\u003e{count}\u003c/div\u003e\n            \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n                Click me\n            \u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n![react-ray-02](https://user-images.githubusercontent.com/5508707/224473711-e1a59701-35a7-4c75-80c5-e69eb13cbf35.gif)\n\nTo update the Ray item in place that was sent with the contents of a ref when its dependencies change, set the `replace` option to true or omit it:\n\n```js\nimport { useRayWithElement } from 'react-ray';\nimport { useRef, useState } from 'react';\n\nconst MyComponent = () =\u003e {\n    const [count, setCount] = useState(0);\n    const countRef = useRef(null);\n\n    useRayWithElement(countRef, [count], { replace: true });\n    // or\n    // useRayWithElement(countRef, [count]);\n\n    return (\n        \u003cdiv\u003e\n            \u003cdiv ref={countRef}\u003e{count}\u003c/div\u003e\n            \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n                Click me\n            \u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n![react-ray-01](https://user-images.githubusercontent.com/5508707/224473546-c695914e-3919-466f-bf05-f760dac36c0f.gif)\n\n\n### `useRayInstance()`\n\nTo access the Ray instance directly, use the `useRayInstance` hook:\n\n```js\nimport { useRayInstance } from 'react-ray';\n\nconst MyComponent = () =\u003e {\n    const ray = useRayInstance();\n\n    ray('hello world');\n\n    return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={() =\u003e ray('hello world')}\u003e\n                Click me\n            \u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n## Setup\n\n```bash\nnpm install\n\nnpm run dev\n```\n\n## Testing\n\n`react-ray` uses Jest for unit tests.  To run the test suite:\n\n`npm run test`\n\n---\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Patrick Organ](https://github.com/patinthehat)\n- [Sam Apostel](https://github.com/sam-apostel)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermafrost-dev%2Freact-ray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpermafrost-dev%2Freact-ray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpermafrost-dev%2Freact-ray/lists"}