{"id":19601829,"url":"https://github.com/gtap-dev/fractal-tsx-adapter","last_synced_at":"2025-10-16T16:32:29.420Z","repository":{"id":29239844,"uuid":"117859466","full_name":"gtap-dev/fractal-tsx-adapter","owner":"gtap-dev","description":"A React + TypeScript adapter for Fractal.","archived":false,"fork":false,"pushed_at":"2023-09-01T08:16:57.000Z","size":701,"stargazers_count":4,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T02:11:12.341Z","etag":null,"topics":["fractal","react","typescript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gtap-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-17T16:05:23.000Z","updated_at":"2023-12-09T09:36:19.000Z","dependencies_parsed_at":"2023-01-14T14:27:40.412Z","dependency_job_id":null,"html_url":"https://github.com/gtap-dev/fractal-tsx-adapter","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtap-dev%2Ffractal-tsx-adapter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtap-dev%2Ffractal-tsx-adapter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtap-dev%2Ffractal-tsx-adapter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gtap-dev%2Ffractal-tsx-adapter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gtap-dev","download_url":"https://codeload.github.com/gtap-dev/fractal-tsx-adapter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252046098,"owners_count":21685947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fractal","react","typescript"],"created_at":"2024-11-11T09:20:24.937Z","updated_at":"2025-10-16T16:32:24.384Z","avatar_url":"https://github.com/gtap-dev.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# A React + TypeScript adapter for Fractal.\n\nAn adapter to let you use TSX templates with Fractal.\n\n## Installation\n```\nnpm install @gotoandplay/fractal-tsx-adapter --save-dev\n```\n\n## Usage\nRequire the adapter in your Fractal configuration file:\n```\nlet tsxAdapter = require('@gotoandplay/fractal-tsx-adapter');\n```\n\nRegister the adapter as engine:\n```\nfractal.components.engine(tsxAdapter);\n```\n\n# Features\n\n## Use HTML/JSX in context strings\n\nBy default, it's not possible to use HTML (or other Fractal components as JSX) in context variables.\n\nSo this example:\n```\n{\n  \"context\": {\n    \"children\": \"\u003cdiv\u003ethis text is in a div\u003c/div\u003e\"\n  }\n}\n```\ndoes not render a div in children, instead it escapes the string.\n\nTo workaround that, you can set the `parseJsxFrom` meta key in your component config:\n```\n{\n  \"meta\": {\n    \"parseJsxFrom\": [\n      \"children\"\n    ]\n  },\n  \"context\": {\n    \"children\": \"\u003cdiv\u003ethis text is in a div\u003c/div\u003e\"\n  }\n}\n```\n\nThis adapter will then parse the specified keys through [react-jsx-parser](https://github.com/TroyAlford/react-jsx-parser). This allows the use of HTML in context strings. Additionally, it allows the use of other components in the current Fractal library.\n\n\u003e NB! This also means you need to do the same parsing when hydrating the component client-side.\n\n## Wrap components in other components\n\nBy default, the render method renders only the component exported as default in the component template file.\n\nSometimes, it's necessary to render outer components that wrap the rendered components, like a React Context provider.\n\n```\nlet SomeComponent = require('some-react-component');\nlet tsxAdapter = require('@gotoandplay/fractal-tsx-adapter')({\n  wrapperElements: [\n    {\n      component: SomeComponent,\n      props: {\n        some: 'prop',\n        yin: 'yang,\n      },\n    },\n    {\n      component: '@fractal-component',\n      props: {\n        some: 'prop',\n        yin: 'yang,\n      },\n    },\n  ],\n});\n```\n\u003e NB! This also means you need to do the same wrapping when hydrating the component client-side.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtap-dev%2Ffractal-tsx-adapter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgtap-dev%2Ffractal-tsx-adapter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgtap-dev%2Ffractal-tsx-adapter/lists"}