Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkabumattar/svelteify-react
svelteify-react is a Svelte component wrapper for React. It allows you to use React components in Svelte.
https://github.com/mkabumattar/svelteify-react
npm npm-package react reactdom svelte svelte-library svelteify-react
Last synced: 12 days ago
JSON representation
svelteify-react is a Svelte component wrapper for React. It allows you to use React components in Svelte.
- Host: GitHub
- URL: https://github.com/mkabumattar/svelteify-react
- Owner: MKAbuMattar
- License: mit
- Created: 2023-04-15T00:58:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-17T19:15:30.000Z (7 months ago)
- Last Synced: 2024-10-13T00:06:46.173Z (26 days ago)
- Topics: npm, npm-package, react, reactdom, svelte, svelte-library, svelteify-react
- Language: JavaScript
- Homepage: https://svelteify-react.vercel.app
- Size: 154 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelteify-react
`svelteify-react` is a Svelte component wrapper for React. It allows you to use React components in Svelte.
## Installation
To install `svelteify-react`, use the following command:
```bash
# npm
npm install --save svelteify-react
# yarn
yarn add svelteify-react
# pnpm
pnpm add svelteify-react
```
## Usage
### Prerequisites
This package requires the following:
- Create a SvelteKit project
- Install `react` and `react-dom` as dependencies
- Install `@types/react` and `@types/react-dom` as dev dependencies
```bash
# npm
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
# yarn
yarn add react react-dom
yarn add --dev @types/react @types/react-dom
# pnpm
pnpm add react react-dom
pnpm add --dev @types/react @types/react-dom
```
### Setup
To use `svelteify-react`, you need to do the following:
- in each React component, add the following line at the top of the file:
```tsx
import React from 'react';
```
### Example
```tsx
import type { ReactNode } from 'react';
import React from 'react';
type Props = {
className?: string;
children: ReactNode;
[x: string]: any;
};
const Title = ({
className = '',
children = 'Hello from React!',
...otherProps
}: Props) => {
return (
{children}
);
};
export default Title;
```
```tsx
import type { ReactNode } from 'react';
import React from 'react';
type Props = {
className?: string;
children: ReactNode;
[x: string]: any;
};
const Button = ({
className = '',
children = 'Button from React!',
...otherProps
}: Props) => {
return (
{children}
);
};
export default Button;
```
```svelte
import { SvelteifyReact } from 'svelteify-react';
import Title from '../components/Title';
import Button from '../components/Button';
export let txt = 'Hello from Svelteify React!';
export let counter = 0;
export let increment = () => {
counter += 1;
};
export let decrement = () => {
counter -= 1;
};
export let reset = () => {
counter = 0;
};
Counter: {counter}
:global(.title) {
font-size: 24px;
font-weight: 500;
color: #3f51b5;
}
.btn-group {
display: flex;
gap: 0.25rem;
}
:global(.btn) {
background-color: #3f51b5;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
```
Example: [svelteify-react-example](https://github.com/MKAbuMattar/svelteify-react/tree/main/example)
## API
### SvelteifyReact
```svelte
```
This component is a wrapper for React components. It accepts the following props:
- `el` (required): The React element to render, or the name of the React element, or the React component.
- `children` (required): The children of the React element.
- `className` (optional): The class name of the React element.
- `onClick` (optional): The `onClick` event handler of the React element.
- `...props` (optional): Any other props to pass to the React element.
The `SvelteifyReact` component returns a `ReactElement` that can be rendered in Svelte.
## License
This package is licensed under the MIT License.