{"id":39456406,"url":"https://github.com/zakodium/adonis-react","last_synced_at":"2026-01-18T04:36:31.340Z","repository":{"id":52501679,"uuid":"313690683","full_name":"zakodium/adonis-react","owner":"zakodium","description":"React provider for AdonisJS 5","archived":false,"fork":false,"pushed_at":"2021-04-27T13:15:54.000Z","size":30,"stargazers_count":25,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-10-20T10:41:48.894Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zakodium.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-17T17:17:13.000Z","updated_at":"2024-09-16T13:23:29.000Z","dependencies_parsed_at":"2022-08-24T13:31:10.766Z","dependency_job_id":null,"html_url":"https://github.com/zakodium/adonis-react","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/zakodium/adonis-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakodium%2Fadonis-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakodium%2Fadonis-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakodium%2Fadonis-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakodium%2Fadonis-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zakodium","download_url":"https://codeload.github.com/zakodium/adonis-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakodium%2Fadonis-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28529867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-01-18T04:36:31.275Z","updated_at":"2026-01-18T04:36:31.331Z","avatar_url":"https://github.com/zakodium.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Adonis React\n\n[![NPM version][npm-image]][npm-url]\n[![build status][ci-image]][ci-url]\n[![npm download][download-image]][download-url]\n\nReact provider for AdonisJS.\n\n| :warning: This module is unstable and in active development. Use at your own risk. |\n| ---------------------------------------------------------------------------------- |\n\n\n## Prerequisites\n\nThis provider requires AdonisJS v5 preview and won't work with AdonisJS v4.\n\n## Installation\n\n```console\nnpm i adonis-react react react-dom\nnpm i -D @types/react\nnode ace invoke adonis-react\n```\n\nYou'll also need to add `\"jsx\": \"react\"` to the `compilerOptions` of your\nTypeScript configuration.\n\n## Usage\n\n### Writing a layout component\n\nIt may change in the future, but for now `adonis-react` doesn't create any HTML\nfor you, so you will probably need to write a layout component that contains\nthe base structure for your page:\n\n```tsx\n// app/Components/layouts/Base.tsx\n\nimport React, { ReactNode } from 'react';\n\nexport default function Base(props: { children: ReactNode }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charSet=\"UTF-8\" /\u003e\n        \u003ctitle\u003eMy Adonis website\u003c/title\u003e\n        \u003clink\n          href=\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\"\n          rel=\"stylesheet\"\n        /\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e{props.children}\u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Writing a page component\n\nNow that you have a layout component, you can use it in any page component (the\ncomponent that will be rendered from your controllers):\n\n```tsx\n// app/Components/pages/Index.tsx\n\nimport React from 'react';\n\nimport Base from '../layouts/Base';\n\nexport default function Index() {\n  return (\n    \u003cBase\u003e\n      \u003cdiv className=\"max-w-screen-xl mx-auto text-center py-16 px-8\"\u003e\n        \u003ch2 className=\"font-extrabold tracking-tight text-gray-900 text-4xl leading-10\"\u003e\n          Hello from Adonis React!\n        \u003c/h2\u003e\n      \u003c/div\u003e\n    \u003c/Base\u003e\n  );\n}\n```\n\n### Rendering a component\n\n#### In a route handler\n\n```ts\n// start/routes.ts\n\nimport Route from '@ioc:Adonis/Core/Route';\n\nimport Index from 'App/Components/pages/Index';\n\nRoute.get('/', async ({ react }) =\u003e react.render(Index));\n```\n\n#### In a controller\n\n```ts\n// app/Controllers/Http/MyController.ts\n\nimport { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';\n\nimport Index from 'App/Components/pages/Index';\n\nexport default class MyController {\n  index({ react }: HttpContextContract) {\n    return react.render(Index);\n  }\n}\n```\n\n### Passing props to the rendered component\n\nIf the component you render expects props, they must be passed as a second\nargument to the `render` method:\n\n```tsx\n// app/Components/pages/WithProps.tsx\n\nimport React from 'react';\n\nimport Base from '../layouts/Base';\n\nexport default function WithProps(props: { name: string }) {\n  return (\n    \u003cBase\u003e\n      \u003cdiv className=\"max-w-screen-xl mx-auto text-center py-16 px-8\"\u003e\n        \u003ch2 className=\"font-extrabold tracking-tight text-gray-900 text-4xl leading-10\"\u003e\n          Hello {props.name}!\n        \u003c/h2\u003e\n      \u003c/div\u003e\n    \u003c/Base\u003e\n  );\n}\n```\n\n```ts\n// start/routes.ts\n\nimport Route from '@ioc:Adonis/Core/Route';\n\nimport Index from 'App/Components/pages/Index';\n\nRoute.get('/with-props', async ({ react }) =\u003e\n  react.render(WithProps, { name: 'my friend' }),\n);\n```\n\n### Accessing the Adonis context from a component\n\nAdonis React provides a hook to access the Adonis context and some helpers from\nanywhere inside the component tree.\n\n```tsx\n// app/Components/pages/WithContext.tsx\n\nimport { useAdonisContext } from '@ioc:React';\nimport React from 'react';\n\nimport Base from '../layouts/Base';\n\nexport default function WithContext(props: { name: string }) {\n  const { request } = useAdonisContext();\n\n  return (\n    \u003cBase\u003e\n      \u003cdiv className=\"max-w-screen-xl mx-auto text-center py-16 px-8\"\u003e\n        \u003ch2 className=\"font-extrabold tracking-tight text-gray-900 text-4xl leading-10\"\u003e\n          Hello from {request.url()}!\n        \u003c/h2\u003e\n      \u003c/div\u003e\n    \u003c/Base\u003e\n  );\n}\n\n// start/routes.ts\n\nimport Route from '@ioc:Adonis/Core/Route';\n\nimport WithContext from 'App/Components/pages/WithContext';\n\nRoute.get('*', async ({ react }) =\u003e react.render(WithContext));\n```\n\n## License\n\n[MIT](./LICENSE)\n\n[npm-image]: https://img.shields.io/npm/v/adonis-react.svg\n[npm-url]: https://www.npmjs.com/package/adonis-react\n[ci-image]: https://github.com/zakodium/adonis-react/workflows/Node.js%20CI/badge.svg?branch=main\n[ci-url]: https://github.com/zakodium/adonis-react/actions?query=workflow%3A%22Node.js+CI%22\n[download-image]: https://img.shields.io/npm/dm/adonis-react.svg\n[download-url]: https://www.npmjs.com/package/adonis-react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakodium%2Fadonis-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzakodium%2Fadonis-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakodium%2Fadonis-react/lists"}