https://github.com/uiwjs/react-stackblitz
A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.
https://github.com/uiwjs/react-stackblitz
react react-component stackblitz
Last synced: about 15 hours ago
JSON representation
A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.
- Host: GitHub
- URL: https://github.com/uiwjs/react-stackblitz
- Owner: uiwjs
- Created: 2021-01-03T15:50:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-26T09:01:31.000Z (4 months ago)
- Last Synced: 2025-05-30T10:52:25.535Z (28 days ago)
- Topics: react, react-component, stackblitz
- Language: TypeScript
- Homepage: https://uiwjs.github.io/react-stackblitz
- Size: 8.12 MB
- Stars: 4
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React StackBlitz
===
[](https://github.com/uiwjs/react-stackblitz/actions/workflows/ci.yml)
[](https://github.com/uiwjs/react-stackblitz/issues)
[](https://github.com/uiwjs/react-stackblitz/network)
[](https://github.com/uiwjs/react-stackblitz/stargazers)
[](https://github.com/uiwjs/react-stackblitz/releases)
[](https://www.npmjs.com/package/@uiw/react-stackblitz)
A React component is provided that allows you to programmatically generate [stackblitz](https://stackblitz.com/) projects from code samples on the fly.
## Install
```bash
npm install @uiw/react-stackblitz --save
```
## Usage
```jsx
import React from 'react';
import StackBlitz from '@uiw/react-stackblitz';
const code = `import React from "react";
import ReactDOM from "react-dom";
import Avatar from '@uiw/react-avatar';
import "@uiw/react-avatar/lib/esm/style/index.css";
ReactDOM.render(
,
document.getElementById("root")
);`;
const Example = () => {
return (
`,
"index.js": code,
}}
>
Basic Example Open in StackBlitz
)
}
```
## Props
```typescript
type StackBlitzProps = Project & React.ButtonHTMLAttributes & {
/**
* String of the Github username, repo and optionally branch/tag/commit.
* https://developer.stackblitz.com/docs/platform/javascript-sdk#sdkopengithubprojectreposlug-opts
*/
repoSlug?: string;
projectId?: string;
embedOpts?: EmbedOpts;
openOpts?: OpenOptions;
};
```
## Development
Runs the project in development mode.
```bash
# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start
```
**production**
Builds the app for production to the build folder.
```bash
npm run build
```
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
### Related
- [`@uiw/react-codepen`](https://github.com/uiwjs/react-codepen)
- [`@uiw/react-codesandbox`](https://github.com/uiwjs/react-codesandbox)
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.