https://github.com/glweems/simple-codesandbox
codesandbox react iframe component
https://github.com/glweems/simple-codesandbox
codesandbox component embeds react
Last synced: 3 months ago
JSON representation
codesandbox react iframe component
- Host: GitHub
- URL: https://github.com/glweems/simple-codesandbox
- Owner: glweems
- Created: 2019-08-19T10:02:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:42:57.000Z (about 1 year ago)
- Last Synced: 2025-01-11T15:38:53.136Z (4 months ago)
- Topics: codesandbox, component, embeds, react
- Language: HTML
- Homepage: https://glweems.github.io/simple-codesandbox
- Size: 1.55 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-codesandbox
> easily display configurable codesandbox iframe
[](https://app.codacy.com/app/glweems/simple-codesandbox?utm_source=github.com&utm_medium=referral&utm_content=glweems/simple-codesandbox&utm_campaign=Badge_Grade_Settings)
[](https://www.npmjs.com/package/simple-codesandbox) [](https://standardjs.com)
## Install
```bash
npm install --save simple-codesandbox
```
or
```bash
yarn add simple-codesandbox
```
## Embed Options
The options shown in the embed modal are not all options available. We need a
new UI for the share model to reflect these options, in the meantime you can
find them here.
| Option | Description | Values | Default |
| ---------------- | ---------------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------ |
| `codeMirror` | Use CodeMirror editor instead of Monaco (decreases embed size significantly). | `boolean` | `false` |
| `editorSize` | Size in percentage of editor. | `number` | `50` |
| `eslint` | Use eslint (increases embed size significantly). | `boolean` | `false` |
| `expandDevTools` | Start with the devtools (console) open. | `boolean` | `false` |
| `fontSize` | Font size of editor | `number (in px)` | `14` |
| `forceRefresh` | Force a full refresh of frame after every edit. | `boolean` | `false` |
| `hideNavigation` | Hide the navigation bar of the preview. | `boolean` | `false` |
| `highlights` | Which lines to highlight (only works in CodeMirror) | `comma separated list of line numbers` | |
| `initialPath` | Which url to initially load in address bar | `string` | `/` |
| `moduleView` | Evaluate the file that is open in the editor. | `boolean` | `false` |
| `previewWindow` | Which preview window to open by default | `console` / `tests` / `browser` | `browser` |
| `runOnClick` | Only load the preview when the user says so. | `boolean` | `false` |
| `verticalLayout` | Whether to show the editor and preview vertically. | `boolean` | `false` |
| `view` | Which view to open by default | `editor` / `split` / `preview` | `split`, `preview` for small screens |
| `module` | Which module to open by default. Multiple paths comma separated are allowed, in that case we show them as tabs | path to module (starting with `/`) | entry path |
## Example Embeds
These are some examples of embeds, based on their properties.
## Usage
```tsx
const App = () => (
)
```
### Smallest Embed
```tsx
const App = () => (
)
```
## License
MIT © [glweems](https://github.com/glweems)