Making wordpress shortcodes with react

When I used to create wordpress themes, I start first doing shortcodes, to have some sort of modularity that allow me to move things around without any problem and reuse it easily on all the pages and layouts.

So the components growth along with complexity so jquery falls short and the code starts to looks messy.

So the solution was vue or react, because of his own nature of everything is a component like shortcodes.

I decide for react cause his way of handle state and jsx.

The complicate at first was how to render the component if was necessary twice or more with his own props…

I look out for packages on npm and I don’t find anything that fit with that requirement.

So I create a package to help me to render dynamically each component multiple times with his own props.

Below his basic implementation:

if you prefer the package.

next an example of usage with a react component:

And his implementation in a wordpress shortcode function.

Another related article: