Mention React usage in Readme

[lodzen]

Description

I struggled a lot with the usage in a React Application.
The problem was that i don't want to put the @routes blade directive in the header of my application because everyone can see all routes directly if the source code is inspected.

Due to this i wanted to go with option two to generate the Ziggy file and use it as custom Ziggy in the route() function.
In the Readme i could only find the Vue solution to use a mixin for this purpose but nothing related to React.

Suggestion

I wrote a very small helper that did the trick for me.
Maybe this one can also be mentioned in the Readme to save some time i someone has the same issue.
I called the file ziggyroutes and imported it in my application in the view where i need it.
Additionally the helper methods are mentioned in the function like current(), check() and url().

import route from '../../assets/ziggyroute';

console.log(route('user.login')); 

import route from 'ziggy';
import { Ziggy } from './ziggy';

export default function (name, params, absolute) {
    var self = {name: name, params: params, absolute: absolute};

    var routeshelper = {};
    
    routeshelper.current = (name) => {
        return route(undefined, undefined, undefined, Ziggy).current(name);
    }
    routeshelper.check = (name) => {
        return route(undefined, undefined, undefined, Ziggy).check(name);
    }
    routeshelper.url = () => {
        return route(self.name, undefined, undefined, Ziggy).url();
    }
    
    return route(name, params, absolute, Ziggy);
  }

If there are any improvements for the small helper please feel free to change it.

[bakerkretzmar]

I don't understand exactly what the helper accomplishes here. Can you just do

import route from 'ziggy';
import { Ziggy } from './ziggy';

right where you actually need to use the route() function?

[lodzen]

Yes i could do this also but then i need to mention every time the custom Ziggy as argument to the route function call.

[bakerkretzmar]

@lodzen great point 😂 I'll think about how we can make this easier for React users, and in the meantime I'll update the Readme to link here. Thanks!

[bakerkretzmar]

I took a quick stab at a Hook that does something quite similar to your helper: useRoute (Ziggy Hook)

I could see this being something that might be worth including in Ziggy out of the box.

[lodzen]

This looks great and i would appreciate it if this would be part of Ziggy.

[deantheiceman]

How do we use this hook without having to import the Ziggy file everytime?