{"_id":"@aliakakis/react-templates-components","_rev":"1-35fd25ba25cf47829a5ff9611324a9cb","name":"@aliakakis/react-templates-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aliakakis/react-templates-components","version":"1.0.0","main":"index.js","description":"Simple template based React Components","dependencies":{"@types/lodash.clonedeep":"^4.5.6","@types/node":"^13.13.4","@types/react":"^16.9.34","@types/react-dom":"^16.9.7","lodash.clonedeep":"^4.5.0","prop-types":"^15.7.2","react":"^16.13.1","react-dom":"^16.13.1"},"devDependencies":{"parcel-bundler":"^1.12.4","prettier":"^2.0.5","ts-loader":"^7.0.2","tslib":"^1.11.1","typescript":"^3.8.3"},"keywords":["react","templates"],"scripts":{"build":"npx parcel build src/index.tsx --no-source-maps --experimental-scope-hoisting"},"author":{"name":"Antonios Liakakis"},"license":"ISC","gitHead":"b805d0f7fd890f4382dc5272b96b6f93f2324122","_id":"@aliakakis/react-templates-components@1.0.0","_nodeVersion":"12.18.2","_npmVersion":"6.14.5","dist":{"integrity":"sha512-bMtvgWXSUcYA/sW5qPPoY2rQ7c/RQfd8rSaxXHdhTln71KOwMCp1NgzDlSD+PqrEslbiCzSprzrugCehB22dxA==","shasum":"ec760d167544f1ddb06eb6f4031842bea91735c2","tarball":"https://registry.npmjs.org/@aliakakis/react-templates-components/-/react-templates-components-1.0.0.tgz","fileCount":14,"unpackedSize":49282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDuIHCRA9TVsSAnZWagAAYU8P/iK7x7cw5ZDFwfBbFTA1\nLOlbbs9uBnu2mpSiMhMLkcW0jaR2XXclzlgclUgtSfGyQ5G5cPuDyGzRz/nx\ncEVfNiKvCu4YcHsIVYl0YpuTOZY6dptPrkwL0S7Q4xoZjo6xC8OPiQ1OJTto\n+bTMwP9LNj8M9bOsLlK/oUoHqy4DC2+EEAhlom4X3cyynjYgZRfnaHyR7uOs\nZufvNXkUsHXlNjobXV+qvlDUE4MDUX+6XoT25dRsrY6x0QgVSlLgcPa6KnNv\nrVH/CqyRwFKgbfmfbfSKX4g5dMmwdlQAJeUEHpsv6YBKoePbp4CzXGguuuLH\nCrSjPT3Wlerq2eUeFC2qZSZjReNFWUhYwi373jWS+Ah5DY4jPBrZca5lmTUu\nMlfKthBF8KoostoP/Hj8S2QDc816vGlrMCQL/ZDiQFqwzzNJ+zxsppqrhxiU\n/hiSyzKeVhcEsoa4Ax7vmDZ8mYp1m+493cPqW59m8fOP4ZnBsaOZNFpDhwhU\nTvpkN73hC/F6/Ka7BfhxqnfhTzgI11a8STS5DtZL0xBuSfpbry9nWareIeu8\nZ/RRR5wKJQ0XHzEocxBvW0lVhF5WRyOKavdoM5Nsmrf0wMc3v3rLy/CjrDTU\nfBcSY7pn9uz9eSbllzfYm6v9b+esleqH+qbrGuQ22rnan0aGDbqxTk7QLT4p\njjWg\r\n=S2x4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM7KHWTRTlUYLmF5FPzxcnzN8AZqKhDiGq9Wd0TS5zEAIhAJFxF5exNUjvc704SmLxubfIO6MuB707KCVotKYn1l1i"}]},"maintainers":[{"name":"aliakakis","email":"aliakakis@gmail.com"}],"_npmUser":{"name":"aliakakis","email":"aliakakis@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-templates-components_1.0.0_1594810887019_0.3866121505473936"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-15T11:01:26.986Z","1.0.0":"2020-07-15T11:01:27.114Z","modified":"2022-04-04T12:53:20.871Z"},"maintainers":[{"name":"aliakakis","email":"aliakakis@gmail.com"}],"description":"Simple template based React Components","keywords":["react","templates"],"author":{"name":"Antonios Liakakis"},"license":"ISC","readme":"# React Templates Components\n\nThese components are not trying to re-invent the wheel or are anything new and spectacular. The main reason to use them\nis because you should strive to write your React components as humanly readable as possible.\n\nReact components tend to become un-readable with two main issues affecting readability:\n\n- Multiple separate render functions which return JSX in the main render() function\n- One large render() function with multiple .map() functions or conditional operators and use of JavaScript in general\n\nIn order to reduce boilerplate this library is introducing components that act like a DSL template language but in the\nform of React components.\n\n## v2.2.6 Information\n\nThe Repeat component is proving more of a hassle than it should. I have marked it as experimental since in order for the component to work\nit has to tamper the internals of a React component. Since this is quite volatile and bad practice I suggest using the usual .map() for iteration.\nI apologize for any inconvenience.\n\n## v2.2.0 Breaking changes\n\n- Repeat component has been re-written in order to sort out issues with the key prop\n- Repeat useRandomKeyForIteration has been removed please use setKey as shown in the docs.\n\n**I apologize for any inconvenience but Repeat proved to be more complex than it should. Please READ CAREFULLY the updated\nexamples in the documentation below.**\n\n## v2.1.1 Release Information\n\n- Added 'useFragment' prop for all components, in case you do not want that extra HTML element added to the DOM.\n\n**Please note that in case you set 'useFragment' to true the 'tag' and/or 'className' props will not have any effect on the component. Therefore if you have styled\nthe HTML element used in the 'tag' prop, you will get weird styling results.**\n\n## v2.0.0 Important information\n\nWhen I started building this library I used JavaScript. However, I am the first to admit that TypeScript is starting\nto grow in me. This update brings the following changes:\n\n- TypeScript re-write\n- Functional components in order to be ready for the class based deprecation React will eventually bring upon us\n- ParcelJS for building from source. I cannot stress how much faster and easier it was and the minified size in also smaller\n- Repeat component has made some \"hasty\" assumptions about the key prop. New version and props are found in the documentation below\n\n### Thoughts\n\nI would like to apologize to anyone that is using this package and hope that any breaking changes are easy and fast to refactor.\nAs always, please do not hesitate to contact me in case you find a bug.\n\n## Getting Started\n\n### Prerequisites if building from source\n\nYou should have an installation of NodeJS any version and npm or yarn\n\nMore over React and PropTypes are MANDATORY for the components to work.\n\nIf you want to build from source by including them in your project, please take a look at my tsconfig.json since v2.0.0 is using TypeScript.\n\nThese components are using React features that were present from the early stages of the library therefore you should not\nencounter any issues. Nevertheless, I do suggest a version of React 15+\n\n### Installing\n\nNpm:\n\n```\nnpm install --save react-templates-components\n```\n\nYarn:\n\n```\nyarn add react-templates-components\n```\n\n## Usage\n\n#### Global props\n\n**_The following props are available for all components:_**\n\n- **tag**\n - type: **string**\n - default: **'div'**\n - description: **You can use here any tag or React element to enclose the children in the same time supporting semantic web**\n- **className**\n - type: **string**\n - default: **\" \"**\n - description: **The usual value found in all React components that translate to class**\n- **useFragment**\n - type: **boolean**\n - default: **false**\n - description: **The component will use the 'React.Fragment' component.\n _Please note that in case you set 'useFragment' to true the 'tag' and/or 'className' props will not have any effect on the component.\n Therefore, if you have styled the HTML element used in the 'tag' prop, you will get weird styling results._**\n\n#### Components\n\nThe following components props are available\n\n#### `` Component\n\n```jsx\n\n
IF
\n\n```\n\nAvailable props (see global props as well):\n\n- **show**\n\n - type: **boolean**\n - default: **true**\n - description: **The value which will show/hide the elements you enclose**\n\n#### `` Component\n\n```jsx\n\n
ELSE
\n\n```\n\nAvailable props (see global props as well):\n\n- **show**\n\n - type: **boolean**\n - default: **true**\n - description: **The value which will show/hide the elements you enclose**\n\n> \\*\\*It is important to understand that you could do the same thing with 2 If components but by using If and Else you\n\n are covering semantics as well. It is also easier to read**\n\n#### `` Component\n\n```jsx\n\n \n
HI CONDITIONAL IF
\n \n \n
HI CONDITIONAL ELSE
\n \n\n```\n\nAvailable props (see global props as well):\n\n- **condition**\n - type: **boolean**\n - default: **true**\n - description: **depending on the 'condition' prop, it will toggle between if and else therefore the prop 'show' in if/else is\n redundant**\n\n#### `/` Component\n\n```jsx\n\n Hi Jack\n Hi John\n Hi Jim\n Hi Jason\n Default\n\n```\n\nAvailable props for `` (see global props as well):\n\n- **expression**\n\n - type: **any**\n - description: **The expression to evaluate**\n\nAvailable props for `` (see global props as well):\n\n- **expressionValue**\n - type: **any**\n - description: **The expressionValue to evaluate with the expression in the `` component**\n\n#### `` Component **(_EXPERIMENTAL use .map() instead_)**\n\n```jsx\n/* No setKey default index will be used */\n\n
\n {'@iterator'}\n
{'@iterator'}
\n
\n
HI REPEAT #2
\n HI REPEAT #3 {'@iterator'}\n\n\n/* Array of objects */\n\n
\n {'@iterator.name'}\n
{'@iterator.id'}
\n
\n
HI REPEAT #2
\n HI REPEAT #3 {'@iterator.name'}\n\n\n/* Array of primitives */\n\n
\n {'@iterator'}\n
{'@iterator'}
\n
\n
HI REPEAT #2
\n HI REPEAT #3 {'@iterator'}\n\n```\n\nAvailable props (see global props as well):\n\n- **iterator**\n - type: **Array** || **Number**\n - default: **none this prop _is required_**\n - description: **Either pass an Array or a number for the component to work**\n- **stringInterpolationIdentifier**\n - type: **string**\n - default: **\"@iterator\"**\n - description: **Change the default identifier for when applying the value of each element with {'@iterator'} inside JSX from the Array**\n- **setKey**\n - type: **string**\n - default: **\"index\"**. If you want to access values in the array, then if it is an array of primitives values use \"@iterator\".\n If it is an array of objects then use \"@iterator.PROP_NAME\". See examples above.\n - description: **This prop will set the key for the element being iterated.**\n\n## License\n\nThis project is licensed under the MIT License\n","readmeFilename":"README.md"}