adonis-react
Advanced tools
Readme
React provider for AdonisJS.
| :warning: This module is unstable and in active development. Use at your own risk. |
|---|
This provider requires AdonisJS v5 preview and won't work with AdonisJS v4.
npm i adonis-react react react-dom
npm i -D @types/react
node ace invoke adonis-react
You'll also need to add "jsx": "react" to the compilerOptions of your
TypeScript configuration.
It may change in the future, but for now adonis-react doesn't create any HTML
for you, so you will probably need to write a layout component that contains
the base structure for your page:
// app/Components/layouts/Base.tsx
import React, { ReactNode } from 'react';
export default function Base(props: { children: ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="UTF-8" />
<title>My Adonis website</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>{props.children}</body>
</html>
);
}
Now that you have a layout component, you can use it in any page component (the component that will be rendered from your controllers):
// app/Components/pages/Index.tsx
import React from 'react';
import Base from '../layouts/Base';
export default function Index() {
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello from Adonis React!
</h2>
</div>
</Base>
);
}
// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import Index from 'App/Components/pages/Index';
Route.get('/', async ({ react }) => react.render(Index));
// app/Controllers/Http/MyController.ts
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext';
import Index from 'App/Components/pages/Index';
export default class MyController {
index({ react }: HttpContextContract) {
return react.render(Index);
}
}
If the component you render expects props, they must be passed as a second
argument to the render method:
// app/Components/pages/WithProps.tsx
import React from 'react';
import Base from '../layouts/Base';
export default function WithProps(props: { name: string }) {
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello {props.name}!
</h2>
</div>
</Base>
);
}
// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import Index from 'App/Components/pages/Index';
Route.get('/with-props', async ({ react }) =>
react.render(WithProps, { name: 'my friend' }),
);
Adonis React provides a hook to access the Adonis context and some helpers from anywhere inside the component tree.
// app/Components/pages/WithContext.tsx
import { useAdonisContext } from '@ioc:React';
import React from 'react';
import Base from '../layouts/Base';
export default function WithContext(props: { name: string }) {
const { request } = useAdonisContext();
return (
<Base>
<div className="max-w-screen-xl mx-auto text-center py-16 px-8">
<h2 className="font-extrabold tracking-tight text-gray-900 text-4xl leading-10">
Hello from {request.url()}!
</h2>
</div>
</Base>
);
}
// start/routes.ts
import Route from '@ioc:Adonis/Core/Route';
import WithContext from 'App/Components/pages/WithContext';
Route.get('*', async ({ react }) => react.render(WithContext));
FAQs
React provider for AdonisJS 5
The npm package adonis-react receives a total of 12 weekly downloads. As such, adonis-react popularity was classified as not popular.
We found that adonis-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.