Skip to content

jpinho/svelte-react-sample-app

Repository files navigation

svelte-react-kit sample app

svelte-react-kit sample app

This is just a sample app for the svelte-react-kit project.


Use React components inside Svelte apps.

This repo is the mirror of RichHarris/react-svelte with some bonus given we also add MaterialUI to the mix here.

<script>
  import Button from "@material-ui/core/Button";
  import { ReactAdapter } from "svelte-react-kit";
</script>

<ReactAdapter
  el={Button}
  class="mui-btn"
  children="Hello"
  variant="contained"
  color="primary"
  onClick={() => alert("hello world!")}
/>

<style>
  /**
   * Styling a React Component from within a Svelte Component.
   */
  :global(.mui-btn) {
    margin: 20px;
  }
</style>

Check the live demo here, and don't forget to see the BlogPost: Using React Within Svelte Apps.

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