Render your React Components directly into custom HTML tags
This is a package that helps you 'sprinkle' your react components throughout your project with ease.
You can apply html attributes to these custom html tags and the attributes will get passed through to your React Component as props.
Installation
To install the package:
npm install react-sprinkle
To use package:
;
The function accepts two parameters:
;
See code example for more details.
Code Example
In Html set up your custom html tag. You can call this whatever you like, but in this example we are calling it custom-htmltag
.
In your react, import this package and use it when instantiating your class. Pass in the component as the first parameter the name of the custom html tag as a string as the second parameter (in this case: 'custom-htmltag'
).
import React from 'react';import reactSprinkle from 'react-sprinkle'; Component { ; } { const props = thisprops; return <React.Fragment> <h1>Hello World</h1> </React.Fragment> ); }
And that should be it. Your React Component should be injected into the page.
Attributes and Properties
On the custom html tag that you create you can also give it attributes that get passed through to the React component as properties, We also parse some of the values as json if possible.
In your React Component you can get access to these by calling your props.
const name = thispropsname; // string
const data = thispropsdata; // object
Why?
We had a couple of project that we wanted to use react and sprinkle it through a normal html/php file. We found that our js started to fill up with a lot of ReactDom.Renders, with some vanilla js having to parse some of the properties that we wanted to pass into those components. So I build this, hopefully it helps some other people out.
Source Examples
To run the example follow below.
npm install
Run the compiler
npm run build
Open up the example/index.html file in chrome and see how it works.