{"id":15870261,"url":"https://github.com/mkabumattar/svelteify-react","last_synced_at":"2025-10-26T00:05:49.991Z","repository":{"id":153086726,"uuid":"628118778","full_name":"MKAbuMattar/svelteify-react","owner":"MKAbuMattar","description":"svelteify-react is a Svelte component wrapper for React. It allows you to use React components in Svelte.","archived":false,"fork":false,"pushed_at":"2024-04-17T19:15:30.000Z","size":158,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T11:19:05.972Z","etag":null,"topics":["npm","npm-package","react","reactdom","svelte","svelte-library","svelteify-react"],"latest_commit_sha":null,"homepage":"https://svelteify-react.vercel.app","language":"JavaScript","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/MKAbuMattar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-04-15T00:58:32.000Z","updated_at":"2023-04-15T15:52:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"1c9fe4a2-e5cb-40b5-a4ce-253b70ec2707","html_url":"https://github.com/MKAbuMattar/svelteify-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Fsvelteify-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Fsvelteify-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Fsvelteify-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Fsvelteify-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MKAbuMattar","download_url":"https://codeload.github.com/MKAbuMattar/svelteify-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246716707,"owners_count":20822507,"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":["npm","npm-package","react","reactdom","svelte","svelte-library","svelteify-react"],"created_at":"2024-10-06T00:05:18.993Z","updated_at":"2025-10-26T00:05:49.922Z","avatar_url":"https://github.com/MKAbuMattar.png","language":"JavaScript","readme":"# svelteify-react\n\n`svelteify-react` is a Svelte component wrapper for React. It allows you to use React components in Svelte.\n\n## Installation\n\nTo install `svelteify-react`, use the following command:\n\n```bash\n# npm\nnpm install --save svelteify-react\n\n# yarn\nyarn add svelteify-react\n\n# pnpm\npnpm add svelteify-react\n```\n\n## Usage\n\n### Prerequisites\n\nThis package requires the following:\n\n- Create a SvelteKit project\n- Install `react` and `react-dom` as dependencies\n- Install `@types/react` and `@types/react-dom` as dev dependencies\n\n```bash\n# npm\nnpm install --save react react-dom\nnpm install --save-dev @types/react @types/react-dom\n\n# yarn\nyarn add react react-dom\nyarn add --dev @types/react @types/react-dom\n\n# pnpm\npnpm add react react-dom\npnpm add --dev @types/react @types/react-dom\n```\n\n### Setup\n\nTo use `svelteify-react`, you need to do the following:\n\n- in each React component, add the following line at the top of the file:\n\n```tsx\nimport React from 'react';\n```\n\n### Example\n\n```tsx\nimport type { ReactNode } from 'react';\nimport React from 'react';\n\ntype Props = {\n\tclassName?: string;\n\tchildren: ReactNode;\n\t[x: string]: any;\n};\n\nconst Title = ({\n\tclassName = '',\n\tchildren = 'Hello from React!',\n\t...otherProps\n}: Props) =\u003e {\n\treturn (\n\t\t\u003ch2 className={`${className}`} {...otherProps}\u003e\n\t\t\t{children}\n\t\t\u003c/h2\u003e\n\t);\n};\n\nexport default Title;\n```\n\n```tsx\nimport type { ReactNode } from 'react';\nimport React from 'react';\n\ntype Props = {\n\tclassName?: string;\n\tchildren: ReactNode;\n\t[x: string]: any;\n};\n\nconst Button = ({\n\tclassName = '',\n\tchildren = 'Button from React!',\n\t...otherProps\n}: Props) =\u003e {\n\treturn (\n\t\t\u003cbutton className={`${className}`} {...otherProps}\u003e\n\t\t\t{children}\n\t\t\u003c/button\u003e\n\t);\n};\n\nexport default Button;\n```\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { SvelteifyReact } from 'svelteify-react';\n\n\timport Title from '../components/Title';\n\timport Button from '../components/Button';\n\n\texport let txt = 'Hello from Svelteify React!';\n\n\texport let counter = 0;\n\n\texport let increment = () =\u003e {\n\t\tcounter += 1;\n\t};\n\n\texport let decrement = () =\u003e {\n\t\tcounter -= 1;\n\t};\n\n\texport let reset = () =\u003e {\n\t\tcounter = 0;\n\t};\n\u003c/script\u003e\n\n\u003cmain\u003e\n\t\u003cSvelteifyReact el={Title} children={txt} className=\"title\" /\u003e\n\n\t\u003cp\u003eCounter: {counter}\u003c/p\u003e\n\n\t\u003cdiv class=\"btn-group\"\u003e\n\t\t\u003cSvelteifyReact\n\t\t\tel={Button}\n\t\t\tchildren={'Increment'}\n\t\t\tclassName=\"btn\"\n\t\t\tonClick={increment}\n\t\t/\u003e\n\n\t\t\u003cSvelteifyReact\n\t\t\tel={Button}\n\t\t\tchildren={'Decrement'}\n\t\t\tclassName=\"btn\"\n\t\t\tonClick={decrement}\n\t\t/\u003e\n\n\t\t\u003cSvelteifyReact\n\t\t\tel={'button'}\n\t\t\tchildren={'Reset'}\n\t\t\tclassName=\"btn\"\n\t\t\tonClick={reset}\n\t\t/\u003e\n\t\u003c/div\u003e\n\u003c/main\u003e\n\n\u003cstyle\u003e\n\t:global(.title) {\n\t\tfont-size: 24px;\n\t\tfont-weight: 500;\n\t\tcolor: #3f51b5;\n\t}\n\n\t.btn-group {\n\t\tdisplay: flex;\n\t\tgap: 0.25rem;\n\t}\n\n\t:global(.btn) {\n\t\tbackground-color: #3f51b5;\n\t\tcolor: white;\n\t\tborder: none;\n\t\tborder-radius: 4px;\n\t\tpadding: 8px 16px;\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcursor: pointer;\n\t}\n\u003c/style\u003e\n```\n\nExample: [svelteify-react-example](https://github.com/MKAbuMattar/svelteify-react/tree/main/example)\n\n## API\n\n### SvelteifyReact\n\n```svelte\n\u003cSvelteifyReact\n  el={string}\n  children={any}\n  className={string}\n  onClick={function}\n  {...props}\n/\u003e\n```\n\nThis component is a wrapper for React components. It accepts the following props:\n\n- `el` (required): The React element to render, or the name of the React element, or the React component.\n- `children` (required): The children of the React element.\n- `className` (optional): The class name of the React element.\n- `onClick` (optional): The `onClick` event handler of the React element.\n- `...props` (optional): Any other props to pass to the React element.\n\nThe `SvelteifyReact` component returns a `ReactElement` that can be rendered in Svelte.\n\n## License\n\nThis package is licensed under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkabumattar%2Fsvelteify-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkabumattar%2Fsvelteify-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkabumattar%2Fsvelteify-react/lists"}