https://github.com/jpinho/svelte-react-sample-app

Use React components inside a Svelte app
https://github.com/jpinho/svelte-react-sample-app

material material-ui react reactjs svelte sveltejs

Last synced: 8 months ago
JSON representation

Use React components inside a Svelte app

• Host: GitHub
• URL: https://github.com/jpinho/svelte-react-sample-app
• Owner: jpinho
• License: mit
• Created: 2021-07-10T16:55:46.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-04-12T00:56:40.000Z (about 3 years ago)
• Last Synced: 2025-10-27T08:52:07.167Z (8 months ago)
• Topics: material, material-ui, react, reactjs, svelte, sveltejs
• Language: TypeScript
• Homepage:
• Size: 2.07 MB
• Stars: 55
• Watchers: 1
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# svelte-react-kit sample app

![svelte-react-kit sample app](docs/svelte.png)

This is just a sample app for the [svelte-react-kit](https://github.com/jpinho/svelte-react-kit) project.

---

Use React components inside Svelte apps.

This repo is the mirror of [RichHarris/react-svelte](https://github.com/Rich-Harris/react-svelte/blob/master/README.md) with some bonus given we also add MaterialUI to the mix here.

```svelte

  import Button from "@material-ui/core/Button";

  import { ReactAdapter } from "svelte-react-kit";

 alert("hello world!")}

/>

  /**

   * Styling a React Component from within a Svelte Component.

   */

  :global(.mui-btn) {

    margin: 20px;

  }

```

Check the live demo [here](https://svelte-react.surge.sh), and don't forget to see the [BlogPost: Using React Within Svelte Apps](https://jpepinho.medium.com/using-react-within-your-svelte-applications-3b1f2a75aefc).

## Usage

Right now there is no npm package that you can install.

To use this, simply copy/paste the `ReactAdapter` into your project and you are done.

Additionally, you may want to copy the rollup and typescript configurations so that you can have React and Svelte living side-by-side.

## License

[MIT](LICENSE)