https://github.com/dillingham/conjoined
ReactJS / Next.js helpers for Laravel
https://github.com/dillingham/conjoined
laravel nextjs react
Last synced: 9 months ago
JSON representation
ReactJS / Next.js helpers for Laravel
- Host: GitHub
- URL: https://github.com/dillingham/conjoined
- Owner: dillingham
- Created: 2022-07-01T01:20:50.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-20T18:14:43.000Z (over 3 years ago)
- Last Synced: 2025-04-28T07:50:32.918Z (about 1 year ago)
- Topics: laravel, nextjs, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/conjoined
- Size: 260 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Conjoined
React / NextJS Helper for Laravel Developers
```
npm i conjoined
```
> This package assumes you already have a backend API setup with Laravel and a frontend app built with Next JS. If not, checkout the official [Laravel Breeze + Next.js](https://github.com/laravel/breeze-next) repo to get started.. makes getting started a breeze..
## Pages
Using this Laravel api endpoint & response for example:
```php
Route::get('users/{user}', [UserController::class, 'show']);
```
```php
public function show(User $user)
{
return [
'user' => $user,
];
}
```
#### Client Side Rendering
Call `usePage` from `/pages/users/[user].js` and a request to `/users/1` on your backend API will take place on mount and any data returned becomes asychronous props for your component.
```jsx
import { usePage } from "conjoined"
export default User = () => {
const {loading, user} = usePage();
if(loading) {
return
loading..
}
return (
{user.name}
)
}
```
#### Server Side Rendering
The api is requested when the [server renders](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) the page and passes the response data as props. So /users/[user].js requests /users/1 automatically for you.
```jsx
export { getServerSideProps } from "conjoined"
export default User = ({ user }) => {
return (
{user.name}
)
}
```
## Forms
The form hook makes native forms as simple as declaring the values and binding to inputs.
Here is a full example with a detailed explanation below.
```jsx
import { useForm, Error } from "conjoined"
const form = useForm({
name: '',
email: '',
})
form.success(data => {
router.push(`/users/${data.id}`)
})
return (
Create
)
```
#### element: form
> `action`: is the endpoint
> `onSubmit`: binds submit button click
#### element: input
> `name` tells `form.bind` the data key to set from useForm
> `onChange={form.bind}` binds the input event value to that name
#### component: Error
> A component that makes conditionally rendering errors clean.
> Comes with default tailwind `text-red-500` but override with className
#### method: form.success()
> Register a callback that receives the API response data.
> Use this to clear the form or redirect to a new destination.
#### method: form.set(key, value)
> Manually set a specific key to a value
#### method: form.reset()
> Clears all inputs to initial state
## Contributing
I added cypress to test end to end with Next.js within `/app`