# react-jadeify

> A Browserify Transform for react-jade.

Latest version **0.1.3** (published 2017-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-jadeify
pnpm add react-jadeify
yarn add react-jadeify
bun add react-jadeify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2017-07-10 |
| First published | 2015-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | kaminaly |
| Maintainers | kaminaly |
| Keywords | browserify, transform, react, jade, templates, templating |

## Links

- npm: https://www.npmjs.com/package/react-jadeify
- Repository: https://github.com/kaminaly/react-jadeify
- Issues: https://github.com/kaminaly/react-jadeify/issues
- npm.io page: https://npm.io/package/react-jadeify

## Dependencies (2)

- [through](https://npm.io/package/through.md) ^2.3.8
- [react-jade](https://npm.io/package/react-jade.md) ^3.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2017-07-10
- 0.1.2 — 2017-07-10
- 0.1.1 — 2017-07-10
- 0.0.5 — 2015-10-20
- 0.0.4 — 2015-05-29
- 0.0.3 — 2015-05-20
- 0.0.2 — 2015-05-20
- 0.0.1 — 2015-05-13

## README

# react-jadeify [![NPM version](https://badge.fury.io/js/react-jadeify.svg)](http://badge.fury.io/js/react-jadeify)
> A Browserify Transform for [react-jade](https://github.com/ForbesLindesay/react-jade).

## Install

```bash
$ npm install --save-dev react-jadeify
```

## Usage
<s>Must use .rjade extention because some people (include me) want to use .jade extention for jade or jadeify.</s>
Can use `.rjade` and `.react.jade` extentions as default.
And you can change extentions by option

### option
#### extentions
can set `String` or `Array`
``` coffee
browserify
  extensions: ['.jade']
  transform: [
    [
      'react-jadeify'
      {extensions: '.jade'}
    ]
  ]

```
``` coffee
browserify
  extensions: ['.jade', '.react.jade']
  transform: [
    [
      'react-jadeify'
      {extensions: ['.jade', '.react.jade']}
    ]
  ]
  
```

### gulp
``` coffee
gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'

gulp.task 'browserify', ->
  browserify
    entries: ['./src/app.coffee']
    extensions: ['.coffee', '.rjade']
    transform: ['coffeeify', 'react-jadeify']
  .bundle()
  .pipe source 'app.js'
  .pipe gulp.dest './build'
```

### app.coffee
``` coffee
React = require 'react'
template = require './templates/hello' # hello.rjade

reactElement = template data: 'hello react-jadeify world'
React.render reactElement, document.body

```

### hello.rjade
``` jade
h1= data

```

### index.jade
``` jade
doctype html
html
  head
    title hello react-jadeify
  body
    script(src="./app.js")

```

## A Little Bit More Practical Example

### app.coffee
``` coffee
'use strict'
React = require 'react'

initTemplate = require './templates/init' # init.rjade
rootTemplate = require './templates/root' # root.rjade

RootCompornent = React.createClass
  getInitialState: -> 'data': 'hello'
  render: rootTemplate.locals localData: 'react-jadeify'

React.render initTemplate(InitCompornent: RootCompornent, data: 'world'), document.body

```

### init.rjade
``` jade
InitCompornent(data=data)

```

### root.rjade
``` jade
h1= this.state.data + ' ' + localData + ' ' + this.props.data

```

---
_Source: https://npm.io/package/react-jadeify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._