├── .gitignore
├── .travis.yml
├── README.md
├── nwb.config.js
├── package.json
├── src
    └── index.js
└── tests
    └── index.test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /lib
2 | /es
3 | /node_modules
4 | yarn.lock
5 | /.idea
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 |   - "6"
 5 | 
 6 | cache:
 7 |   directories:
 8 |     - node_modules
 9 | 
10 | install:
11 |   - npm install
12 | 
13 | script:
14 |   - npm run test
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-twig
 2 | 
 3 | [![npm package](https://img.shields.io/npm/v/react-twig.svg?style=flat-square)](https://www.npmjs.org/package/react-twig)
 4 | [![Build Status](https://travis-ci.org/lauriii/react-twig.svg?branch=master)](https://travis-ci.org/lauriii/react-twig)
 5 | 
 6 | React wrapper-component for Twig. Can be used to render templates inside a react component.
 7 | 
 8 | ## Usage
 9 | 
10 |     import ReactTwig from 'react-twig'
11 | 
12 | 
13 |     <ReactTwig template="Kittens say: {{ variable }}" data={{ variable: 'meow' }} />
14 | 


--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   type: 'react-component',
 3 |   build: {
 4 |     externals: {
 5 |       'react': 'React'
 6 |     },
 7 |     global: 'ReactTwig',
 8 |     jsNext: true,
 9 |     umd: true
10 |   }
11 | };
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-twig",
 3 |   "version": "0.2.0",
 4 |   "description": "React component for Twig.",
 5 |   "main": "lib/index.js",
 6 |   "jsnext:main": "es2/index.js",
 7 |   "files": [
 8 |     "es",
 9 |     "lib"
10 |   ],
11 |   "dependencies": {
12 |     "twig": "^1.10.5"
13 |   },
14 |   "peerDependencies": {
15 |     "prop-types": "^15.6.0",
16 |     "react": "^16.0.0"
17 |   },
18 |   "devDependencies": {
19 |     "nwb": "0.19.x",
20 |     "prop-types": "^15.6.0",
21 |     "react": "^16.0.0",
22 |     "react-dom": "^16.0.0"
23 |   },
24 |   "scripts": {
25 |     "build": "nwb build",
26 |     "clean": "nwb clean",
27 |     "test": "nwb test"
28 |   },
29 |   "authors": [
30 |     {
31 |       "name": "Lauri Eskola",
32 |       "email": "lauri.eskola@gmail.com"
33 |     }
34 |   ],
35 |   "bugs": {
36 |     "url": "https://github.com/lauriii/react-twig/issues"
37 |   },
38 |   "license": "MIT",
39 |   "repository": {
40 |     "type": "git",
41 |     "url": "https://github.com/lauriii/react-twig.git"
42 |   },
43 |   "keywords": [
44 |     "react",
45 |     "react-component",
46 |     "template",
47 |     "twig"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Twig from 'twig';
 4 | 
 5 | export default class ReactTwig extends React.Component {
 6 | 
 7 |   compileTemplate(template, data) {
 8 |     return Twig.twig({ data: template }).render(data);
 9 |   };
10 | 
11 |   render() {
12 |     const { template, data, Component } = this.props;
13 | 
14 |     if (!template) {
15 |       return false;
16 |     }
17 | 
18 |     const __html = this.compileTemplate(template, data);
19 | 
20 |     return (
21 |       <Component dangerouslySetInnerHTML={{__html}}/>
22 |     );
23 |   }
24 | }
25 | 
26 | ReactTwig.defaultProps = {
27 |   data: {},
28 |   Component: 'div'
29 | };
30 | 
31 | ReactTwig.propTypes = {
32 |   Component: PropTypes.string.isRequired,
33 |   template: PropTypes.string.isRequired,
34 |   data: PropTypes.object
35 | };
36 | 


--------------------------------------------------------------------------------
/tests/index.test.js:
--------------------------------------------------------------------------------
 1 | import ReactTwig from '../src/index';
 2 | import expect from 'expect';
 3 | import React from 'react';
 4 | import { renderToStaticMarkup as render } from 'react-dom/server';
 5 | 
 6 | describe('Minimal template', () => {
 7 |   it('is rendered correctly with minimal setup', () => {
 8 |     expect(render(<ReactTwig template="Kittens say: {{ variable }}" data={{ variable: "meow" }} />))
 9 |       .toContain('<div>Kittens say: meow</div>')
10 |   });
11 | 
12 |   it('is rendered correctly without data variable', () => {
13 |     expect(render(
14 |       <ReactTwig
15 |         template="Kittens say: {{ variable }}"
16 |       />
17 |     )).toContain('<div>Kittens say: </div>')
18 |   });
19 | 
20 |   it('is rendered correctly while using Twig filters', () => {
21 |     expect(render(
22 |       <ReactTwig
23 |         template="Kittens say: {{ variable|default('meow') }}"
24 |       />
25 |     )).toContain('<div>Kittens say: meow</div>')
26 |   });
27 | 
28 |   it('allows configuring wrapper element', () => {
29 |     expect(render(
30 |       <ReactTwig
31 |         template="Kittens say: {{ variable }}"
32 |         data={{ variable: "meow" }}
33 |         Component="span"
34 |       />
35 |     )).toContain('<span>Kittens say: meow</span>')
36 |   });
37 | });
38 | 


--------------------------------------------------------------------------------