https://github.com/MoOx/metalsmith-react

Metalsmith plugin to use React as a template engine
https://github.com/MoOx/metalsmith-react

Last synced: 4 months ago
JSON representation

Metalsmith plugin to use React as a template engine

• Host: GitHub
• URL: https://github.com/MoOx/metalsmith-react
• Owner: MoOx
• License: mit
• Archived: true
• Created: 2015-05-01T06:15:27.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-05-17T07:31:23.000Z (over 2 years ago)
• Last Synced: 2024-08-09T14:33:23.658Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 12
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# metalsmith-react [![Travis Build Status](https://travis-ci.org/MoOx/metalsmith-react.svg)](https://travis-ci.org/MoOx/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.

**Have a look to [Next.js](https://nextjs.org) instead !**

Note that this module doesn't handle jsx.

You might use [babel(-node)](http://babeljs.io/) to handle that.

## Install

```console

$ npm install metalsmith-react

```

## Usage

```js

import Metalsmith from "metalsmith"

import react from "metalsmith-react"

new Metalsmith("./")

  .use(

    react({

      pattern: "**/*.md",

      templatesPath: "modules", // default to "templates"

      before: "\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__](__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](https://github.com/sindresorhus/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: "\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`).

## [CHANGELOG](CHANGELOG.md)

## [LICENSE](LICENSE)