nornj-react

React bindings for NornJ template engine.

Usage no npm install needed!

<script type="module">
  import nornjReact from 'https://cdn.skypack.dev/nornj-react';
</script>

README

NornJ-React

React bindings for NornJ template engine.

Install

npm install nornj-react

bindTemplate

You can use bindTemplate to register React components to NornJ template engine.

Class components

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import nj from 'nornj';
import { bindTemplate } from 'nornj-react';

@bindTemplate
class TestComponent extends Component {
  render() {
    return <i>{this.props.children}</i>;
  }
}

ReactDOM.render(nj`<TestComponent>test</TestComponent>`(), document.body);

In addition, bindTemplate also support a name parameter:

...
import { bindTemplate } from 'nornj-react';

@bindTemplate('test-Component')
class TestComponent extends Component {
  render() {
    return <i>{this.props.children}</i>;
  }
}

ReactDOM.render(nj`<test-Component>test</test-Component>`(), document.body);

Function components

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import nj from 'nornj';
import { bindTemplate } from 'nornj-react';

const TestComponent = bindTemplate('test-Component')(props => (
  <i>{props.children}</i>
));

ReactDOM.render(nj`<test-Component>test</test-Component>`(), document.body);

License

MIT