{"_id":"hof-util-react","_rev":"52-f19d1877c8924c5e5f0a8124df5b856c","name":"hof-util-react","dist-tags":{"alpha":"1.0.0-0","latest":"1.0.0-0"},"versions":{"1.0.0-0":{"name":"hof-util-react","version":"1.0.0-0","author":"","license":"MIT","_id":"hof-util-react@1.0.0-0","maintainers":[{"name":"lennym","email":"leonard.martin@gmail.com"}],"homepage":"https://github.com/UKHomeOfficeForms/hof-util-react#readme","bugs":{"url":"https://github.com/UKHomeOfficeForms/hof-util-react/issues"},"dist":{"shasum":"71001074ebdf1a667a02955de42330eb8c8ace2b","tarball":"https://registry.npmjs.org/hof-util-react/-/hof-util-react-1.0.0-0.tgz","integrity":"sha512-8Cxos0HdewJOur7KZvRItG9b8ihv7iWdJR0FVNbJAq3BpvNDzGmhdL+HFvCy/KvLkg8G9NbEHaZKtRhACcfcIQ==","signatures":[{"sig":"MEQCIG7qs9cg8J1vGohKqxcortHRYh816OC/OPhRvtmj6CW5AiAl3/cPm+ytcwGcwnMDu0VfTP/AOvHqX4Wjt1V4AR+tmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","gitHead":"453cc3b21f0919697aa6f70607e8e0e976c840a7","scripts":{"test":"npm run test:lint","test:lint":"eslint ."},"_npmUser":{"name":"lennym","email":"leonard.martin@gmail.com"},"repository":{"url":"git+https://github.com/UKHomeOfficeForms/hof-util-react.git","type":"git"},"_npmVersion":"5.1.0","description":"Allows a hof app to use react components in templates","directories":{},"_nodeVersion":"8.1.3","dependencies":{"react":"^15.6.1","react-dom":"^15.6.1","babel-core":"^6.25.0","babel-preset-react":"^6.24.1"},"devDependencies":{"eslint":"^4.1.1","eslint-config-homeoffice":"^2.1.2"},"_npmOperationalInternal":{"tmp":"tmp/hof-util-react-1.0.0-0.tgz_1499431893490_0.7232715168502182","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-07-07T12:51:34.417Z","modified":"2026-09-21T15:12:56.082Z","1.0.0-0":"2017-07-07T12:51:34.417Z"},"bugs":{"url":"https://github.com/UKHomeOfficeForms/hof-util-react/issues"},"license":"MIT","homepage":"https://github.com/UKHomeOfficeForms/hof-util-react#readme","repository":{"url":"git+https://github.com/UKHomeOfficeForms/hof-util-react.git","type":"git"},"description":"Allows a hof app to use react components in templates","maintainers":[{"email":"aaron.russell@digital.homeoffice.gov.uk","name":"aaronrussellho"},{"email":"sas-hof-test@digital.homeoffice.gov.uk","name":"hof-bot-user"},{"email":"dk4g.blob@gmail.com","name":"dk4g"},{"email":"gregory.wolverson@digital.homeoffice.gov.uk","name":"greg_wolverson_ho"},{"email":"vinodha.samiyappan@digital.homeoffice.gov.uk","name":"vinodha.s"},{"email":"megan.john@digital.homeoffice.gov.uk","name":"meganjohn"},{"email":"nese.zorba@digital.homeoffice.gov.uk","name":"nzorba"},{"email":"rayhannur.rohman@digital.homeoffice.gov.uk","name":"rayhannurrohmanho"},{"email":"vivek.kumar1@digital.homeoffice.gov.uk","name":"vivekkumar-ho"},{"email":"leonard.martin@gmail.com","name":"lennym"}],"readme":"# hof-util-react\n\nAllows a hof app to use react components in templates\n\n## Usage\n\nGiven a React component as follows:\n\n```jsx\nconst React = require('react');\n\nclass HelloWorld extends React.Component {\n  render() {\n    return <h1>Hello World!</h1>;\n  }\n}\n\nmodule.exports = HelloWorld;\n```\n\nIn your app, you first need to add the components:\n\n```js\nconst hof = require('hof');\nconst react = require('hof-util-react');\n\nconst HelloWorld = require('./components/hello-world');\n\nconst app = hof(settings);\n\napp.use(react(HelloWorld));\n```\n\nThis will then create a template mixin that will render your react component into a page:\n\n```\n{{#HelloWorld}}{{/HelloWorld}}\n```\n\nThe values from the template render context will be passed into your component as props.\n\n## Arguments\n\nIf an argument is passed to the template mixin then this is given to the component as a prop of `argument`.\n\n```jsx\nconst React = require('react');\n\nclass HelloWorld extends React.Component {\n  render() {\n    const greeting = this.props.argument;\n    return <h1>{greeting} World!</h1>;\n  }\n}\n\nmodule.exports = HelloWorld;\n```\n\n```\n{{#HelloWorld}}Howdy{{/HelloWorld}}\n```\n\n## Options\n\nBy default the name of your template mixin will match the name of your component.\n\nIf your component has no name (i.e. is an anonymous function) or you want to override the name, then you can pass a custom name when mounting the component.\n\n```js\napp.use(react('hello-world', HelloWorld));\n```\n\nThe template mixin will then be named `hello-world`:\n\n```\n{{#hello-world}}Howdy{{/hello-world}}\n```\n\n## Compiling JSX\n\nBy default `hof-util-react` will expect JSX files to be precompiled. You can have these compiled dynamically on require by registering a babel compiler. Simply run the following function anywhere in your app:\n\n```js\nconst react = require('hof-util-react');\nreact.register();\n```\n","readmeFilename":"README.md"}