{"id":16431938,"url":"https://github.com/bfanger/svelte-preprocess-react","last_synced_at":"2025-05-16T03:02:04.032Z","repository":{"id":40280590,"uuid":"501805119","full_name":"bfanger/svelte-preprocess-react","owner":"bfanger","description":"Seamlessly use React components inside a Svelte app","archived":false,"fork":false,"pushed_at":"2025-02-03T08:32:58.000Z","size":1097,"stargazers_count":152,"open_issues_count":7,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-11T06:17:54.401Z","etag":null,"topics":["react","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-preprocess-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bfanger.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-09T20:52:00.000Z","updated_at":"2025-05-07T06:17:40.000Z","dependencies_parsed_at":"2024-01-29T17:53:39.295Z","dependency_job_id":"764d3c4a-7350-4b44-8839-a368c91d4a9b","html_url":"https://github.com/bfanger/svelte-preprocess-react","commit_stats":{"total_commits":89,"total_committers":5,"mean_commits":17.8,"dds":0.4831460674157303,"last_synced_commit":"bcefa8501a0fb16a51599ff6efec4e38cb19cddb"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfanger%2Fsvelte-preprocess-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfanger%2Fsvelte-preprocess-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfanger%2Fsvelte-preprocess-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bfanger%2Fsvelte-preprocess-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bfanger","download_url":"https://codeload.github.com/bfanger/svelte-preprocess-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459077,"owners_count":22074604,"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":["react","svelte"],"created_at":"2024-10-11T08:35:11.110Z","updated_at":"2025-05-16T03:02:04.012Z","avatar_url":"https://github.com/bfanger.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![svelte-preprocess-react](./static/svelte-preprocess-react.svg)](https://www.npmjs.com/package/svelte-preprocess-react)\n\n# Svelte Preprocess React\n\nSeamlessly use React components inside a Svelte app\n\nSupports:\n\n- Nesting (Slot \u0026 Children)\n- Contexts\n- SSR\n- Hooks ([useStore](./docs/useStore.md) \u0026 [hooks](./docs/hooks.md))\n\nThis project was featured at the [Svelte London - November 2022 Meetup](https://www.youtube.com/live/DXQl1G54DJY?feature=share\u0026t=2569)\n\n\u003e \"Embrace, extend and extinguish\"\n\nThis preprocessor is intended as solution using third-party React components or for migrating an existing React codebase.\n\n## Using React inside Svelte components\n\nInside the Svelte template prepend the name of the component with `react.` prefix.\n\nInstead of `\u003cButton\u003e`, you'd write `\u003creact.Button\u003e`\n\nUse libraries from the React's ecosystem, react-youtube for example:\n\n```svelte\n\u003cscript\u003e\n  import YouTube from \"react-youtube\";\n\n  const react = sveltify({ YouTube }); // Optional step, but adds type-safety\n\u003c/script\u003e\n\n\u003creact.YouTube videoId=\"AdNJ3fydeao\" /\u003e\n```\n\nThe snippet above would be generate:\n\n```svelte\n\u003c!-- Generated by svelte-preprocess-react --\u003e\n\u003cscript\u003e\n  import ReactDOM from \"react-dom/client\";\n  import { createPortal } from \"react-dom\";\n  import { renderToString } from \"react-dom/server\";\n  import { sveltify } from \"svelte-preprocess-react\";\n  import YouTube from \"react-youtube\";\n\n  const react = sveltify(\n    { YouTube },\n    { createPortal, ReactDOM, renderToString },\n  );\n\u003c/script\u003e\n\n\u003creact.YouTube videoId=\"AdNJ3fydeao\" /\u003e\n```\n\n## Setup / Installation\n\n```sh\nnpm install --save-dev svelte-preprocess-react react react-dom\n```\n\nAdd `preprocessReact` to your svelte.config.js:\n\n```js\n// svelte.config.js\nimport preprocessReact from \"svelte-preprocess-react/preprocessReact\";\n\nexport default {\n  preprocess: preprocessReact(),\n};\n```\n\nWhen using other processors like [@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) or [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) add preprocessReact preprocessor as the last processor:\n\n```js\n// svelte.config.js\nimport { vitePreprocess } from \"@sveltejs/vite-plugin-svelte\";\nimport preprocessReact from \"svelte-preprocess-react/preprocessReact\";\n\nexport default {\n  preprocess: [vitePreprocess(), preprocessReact()],\n};\n```\n\n## Using Svelte inside React components\n\nOnce you've converted a React component to Svelte, you'd want delete that React component, but some if other React components depended on that component you can use `reactify` to use the new Svelte component as a React component.\n\n```jsx\nimport { reactify } from \"svelte-preprocess-react\";\nimport Button from \"../components/Button.svelte\";\n\nconst svelte = reactify({ Button });\n\nfunction MyComponent() {\n  return (\n    \u003csvelte.Button onClick={() =\u003e console.log(\"clicked\")}\u003e\n      Click me\n    \u003c/svelte.Button\u003e\n  );\n}\n```\n\n## Using multiple frameworks is a bad idea\n\nUsing multiple frontend frameworks adds overhead, both in User and Developer experience.\n\n- Increased download size\n- Slower (each framework boundary adds overhead)\n- Context switching, keeping the intricacies of both Svelte and React in your head slows down development\n\nWhen using third-party React components, keep an eye out for Svelte alternatives, or publish your own.\n\nWhen used as migration tool (can be used to migrate _from_ or _to_ React),\nthe goal should be to stop writing new React components, and to convert existing React components to Svelte components.\nOnce all components are converted this preprocessor should be uninstalled.\n\n# More info\n\n- [reactify()](./docs/reactify.md) Convert a Svelte component into an React component\n- [hooks()](./docs/hooks.md) Using React hooks inside Svelte components\n- [useStore](./docs/useStore.md) Using a Svelte Store in a React components\n- [Caveats](./docs/caveats.md) Limitations and workarounds\n- [react-router](./docs/react-router.md) Migrate from react-router to SvelteKit\n- [Architecture](./docs/architecture.md) svelte-preprocess-react's API Design-principles and System architecture\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfanger%2Fsvelte-preprocess-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbfanger%2Fsvelte-preprocess-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbfanger%2Fsvelte-preprocess-react/lists"}