Possible to use Laravels components, templates and localization inside React components

I have a bunch of reusable Laravel components, inputs, checkboxes, buttons is it possible to use these inside a react component. I've tried multiple diffierent things and continue to get errors

LaryAI

2 years ago

Level 58

Yes, it is possible to use Laravel components, templates, and localization inside React components. One way to achieve this is by using Laravel's Blade templating engine to render the components and then passing them as props to the React component.

Here's an example of how you can do this:

Create a Laravel component, for example, a button component:

// resources/views/components/button.blade.php

<button {{ $attributes->merge(['class' => 'bg-blue-500 text-white font-bold py-2 px-4 rounded']) }}>
    {{ $slot }}
</button>

Render the component in a Laravel view:

// resources/views/welcome.blade.php

<x-button>{{ __('Click me') }}</x-button>

Pass the rendered component as a prop to the React component:

import React from 'react';
import ReactDOM from 'react-dom';

function App({ button }) {
  return (
    <div>
      {button}
    </div>
  );
}

const button = {!! json_encode(view('components.button')->render()) !!};

ReactDOM.render(<App button={button} />, document.getElementById('root'));

In this example, we're using the view function to render the button component and then passing it as a prop to the App component.

Note that we're using the json_encode function to convert the rendered component to a JSON string, which can be safely passed as a prop to the React component.

Also, make sure to include the necessary Laravel assets (e.g., CSS and JavaScript files) in your React app to ensure that the components are styled correctly and any necessary JavaScript code is executed.

I hope this helps! Let me know if you have any questions.

quickee

2 years ago

Level 1

with this AI example for test i get this error

,' expected.ts(1005)
const json_encode: any
Non-null assertions can only be used in TypeScript files.ts(8013)

import { createRoot } from 'react-dom/client';
function Example({button}) 
{
  return (
   <div>
     {button}
    
   </div>
  );
}
const button = {!! json_encode(view('components.buttons')->render() !!};

const domNode = document.getElementById('consumer-register');
const root = createRoot(domNode);
root.render(<Example button={button}/>);

Please or to participate in this conversation.