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:

# 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

# 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:

import React from 'react';

Example

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 (
        <h2 className={`${className}`} {...otherProps}>
            {children}
        </h2>
    );
};

export default Title;

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 (
        <button className={`${className}`} {...otherProps}>
            {children}
        </button>
    );
};

export default Button;

<script lang="ts">
    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;
    };
</script>

<main>
    <SvelteifyReact el={Title} children={txt} className="title" />

    <p>Counter: {counter}</p>

    <div class="btn-group">
        <SvelteifyReact
            el={Button}
            children={'Increment'}
            className="btn"
            onClick={increment}
        />

        <SvelteifyReact
            el={Button}
            children={'Decrement'}
            className="btn"
            onClick={decrement}
        />

        <SvelteifyReact
            el={'button'}
            children={'Reset'}
            className="btn"
            onClick={reset}
        />
    </div>
</main>

<style>
    :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;
    }
</style>

Example: svelteify-react-example

API

SvelteifyReact

<SvelteifyReact
  el={string}
  children={any}
  className={string}
  onClick={function}
  {...props}
/>

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.