Install
metalsmith-react 
Metalsmith plugin to use React as a template engine
Is it possible to use React on the front-end to be able to use stuff like onClick?
That's a really good question.
This can be probably done with metalsmith, but this tool is not the right choice.
Not front-end oriented enough.
Because of this frustration, I created Phenomic,
which is a modern static website generator based on React and Webpack.
This project is under active development (unlike metalsmith), so give it a try!
Note that this module doesn't handle jsx.
You might use babel(-node) to handle that.
Install
$ npm install metalsmith-react
Usage
import Metalsmith from "metalsmith"
import react from "metalsmith-react"
new Metalsmith("./")
.use(
react({
pattern: "**/*.md",
templatesPath: "modules", // default to "templates"
before: "<!doctype html>\n",
data: {
some: "data", // you might be able to consume that as props in the template
},
reactRender: "renderToStaticMarkup" //you can use "renderToString" if you want
})
)
.build(err => {if (err) {throw err}})
See tests for templates examples
Options
templatesPath (default: "templates")
Place to read react templates (class)
defaultTemplate (default: "default")
Name of the default template file (relative to templatesPath)
pattern (default: "**/*"),
Pattern to filter files. Used by multimatch
data (default: {})
Object passed to React component in addition to the file itself.
before (default: "")
Allows to prepend something before the rendered component (eg: {before: "<!doctype html>\n"})
after (default: "")
Allows to append something after the rendered component
reactRender (default: "renderToStaticMarkup")
React render method. You can use "renderToString" if you want.
CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
$ npm test).
