Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shipless/play
Shipless Play is a React simple playground for HTML, CSS and JavaScript
https://github.com/shipless/play
monorepo react reactplayground tsdx typescript
Last synced: 30 days ago
JSON representation
Shipless Play is a React simple playground for HTML, CSS and JavaScript
- Host: GitHub
- URL: https://github.com/shipless/play
- Owner: malessui
- Created: 2021-07-22T22:11:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-28T04:52:06.000Z (over 3 years ago)
- Last Synced: 2024-04-23T10:04:48.602Z (8 months ago)
- Topics: monorepo, react, reactplayground, tsdx, typescript
- Language: TypeScript
- Homepage: https://shipless-play.netlify.app/
- Size: 1.16 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-made-by-indonesian - Shipless Play - `Shipless Play is a React simple playground for HTML, CSS and JavaScript` *by [Ship Less](https://github.com/shipless)* (S)
- made-in-indonesia - Shipless Play - `Shipless Play is a React simple playground for HTML, CSS and JavaScript` *by [Ship Less](https://github.com/shipless)* (S)
README
# Shipless Play
Shipless Play is a React simple playground for HTML, CSS and JavaScript
[![npm (scoped)](https://img.shields.io/npm/v/@shipless/play?style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)
[![npm](https://img.shields.io/npm/dt/@shipless/play?label=Download&style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)
![NPM](https://img.shields.io/npm/l/@shipless/highlight?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/@shipless/play?style=for-the-badge)### Features
- ✅ Realtime preview
- ⬜️ Support SCSS
- ⬜️ Support React
- ⬜️ Custom theme### Installation
Use the package manager `yarn` or `npm` to install this package.
```bash
yarn add @shipless/play
# or
npm install @shipless/play
```### Usage
`import` @shipless/play package suck as the following:
```js
import ShiplessPlay from "@shipless/play"const value = {
html: `
`,
css: `
body {
background: #97a2a9;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
`,
javascript: `
console.log("your js")
`
}```
Then you must import style on your css file:
```css
@import url("@shipless/play/dist/style.css");
```### Format for initial snippet
```js
{
html: `Title
`,
css: `h1 { color: red }`,
javascript: `console.log("this")`
}
```### Demo
[Example](https://shipless-play.netlify.app/)
### Showcase
- [Custom scrollbar di css](https://muhrusdi.github.io/blog/custom-scrollbar-di-css) - murusdi
### API
| Props | description | default | required |
| :--------------: | :--------------------------------------------------------: | :--------------------------------------: | :------: |
| id | a unique identifier for the iFrame | | false |
| defaultValue | Initial code to be displayed | | false |## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.Please make sure to update tests as appropriate.
## License
[MIT](https://choosealicense.com/licenses/mit/)