mount-page

Automatically mount a React Component to a div with an id of the same name, wrapping with any given translations and props.

Use Case

Not every application needs to make use of React on every page, so being able to mount a Component on specific pages can be useful.

This package was developed to help incorporate React into a large Laravel codebase. Letting us keep using our existing routing and translations, but within a reactive interface.

Usage

Create a div with the dash cased Component name, passing any props and translation keys.

<!-- view.blade.php -->
<div
  id="react-my-component"
  data-props="{{ $props }}"
  data-translations="{{ $translations }}"
></div>

Build a component, making use of your translations.

// MyComponent.js
import React from 'react';

import { TranslationsContext } from '@ubisend/mount-page';

const MyComponent = props => (
	return (
		<TranslationsContext.Consumer>
			{({ __ }) => {
				<h1>{ __('my_translation_key') }</h1>
			}}
		</TranslationContext.Consumer>
	)
)

Mount your components at the entry point of your js assets. This will automatically mount each component to a div with the same name.

// resources/js/index.js
import mountComponents from "@ubisend/mount-page";

import { MyComponent } from "./Components/index";

mountComponents({ MyComponent });