Using React

Step 1 - custom-react-component.html

<div data-react-component="CustomReactComponent"
	data-prop-api-url="/api/service"
     	data-prop-data="{ items: [ ... ] }"
	data-prop-has-load-more-button="true"
	data-prop-no-results-label="No results..."
	data-prop-page-limit="10"
/>

Step 2 - custom-react-component.tsx

interface ICustomReactComponentProps {
	apiUrl: string;
	data: object;
	hasLoadMoreButton: boolean;
	noResultsLabel: string;
	pageLimit: number;
}

Step 3 - getPropsFromAttributes.ts

/**
 * Loop through all data attributes on the root element and use data-prop-* as props.
 */
export default (element: Element) => {
	const props = {};

	if (element instanceof HTMLElement) {
		const dataset = element.dataset;

		for (const attribute in dataset) {
			if (attribute.indexOf('prop') === 0) {
				let key = attribute.replace(/^prop/, '');
				key = key.charAt(0).toLowerCase() + key.slice(1);

				const value = dataset[attribute];

				if (value && !isNaN(Number(value))) {
					// If prop is a number
					props[key] = parseInt(value, 10);
				} else if (value && value.toLowerCase() === 'true') {
					props[key] = true;
				} else if (value && value.toLowerCase() === 'false') {
					props[key] = false;
				} else if (value && isJson(value)) {
					// Prop is an object
					props[key] = JSON.parse(value);
				} else {
					// Prop is a string
					props[key] = value;
				}
			}
		}
	}

	return props;
};

function isJson(value: string) {
	try {
		JSON.parse(value);
	} catch (e) {
		return false;
	}

	return true;
}

Step 4 - custom-react-component-initialise.tsx

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

import CustomReactComponent, { ICustomReactComponentProps } from './custom-react-component';
import forEach from '../utilities/forEach';
import getPropsFromAttributes from '../utilities/getPropsFromAttributes';

const SELECTOR = '[data-react-component="CustomReactComponent"]';
const elements = document.querySelectorAll(SELECTOR);

forEach(elements, (element) => {
	const props = getPropsFromAttributes(element) as ICustomReactComponentProps;

	ReactDOM.render(<CustomReactComponent {...props} />, element);
});