https://github.com/kazewaze/recessjs
Eazy Peazy Playground Components for React.js
https://github.com/kazewaze/recessjs
articles blog code-editor components editable front-end javascript js jsx live-edit nodejs playgrounds react react-live reactjs
Last synced: 3 months ago
JSON representation
Eazy Peazy Playground Components for React.js
- Host: GitHub
- URL: https://github.com/kazewaze/recessjs
- Owner: kazewaze
- Created: 2021-11-06T07:46:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-15T20:15:45.000Z (almost 2 years ago)
- Last Synced: 2025-02-18T15:21:59.753Z (4 months ago)
- Topics: articles, blog, code-editor, components, editable, front-end, javascript, js, jsx, live-edit, nodejs, playgrounds, react, react-live, reactjs
- Language: JavaScript
- Homepage:
- Size: 135 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Recess.js
## Version 1.0 is Ready! More Features and Official Docs Coming Soon!
Eazy Peazy Playground Components for React.js (Just Plug and Play)
Recess.js is built on top of [React-Live](https://github.com/FormidableLabs/react-live), an awesome project by [Formidable](https://formidable.com) for building a Playground Component.
The current 1.0 version of Recess.js is ready for use. For simple usage I have provided basic instructions below until the Docs are completed.
If you want to use a different theme go here to see the other choices:
[Available Themes](https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes)
Install Recess.js with npm or yarn:
```console
npm install recessjs
```
or
```console
yarn install recessjs
```
Once installed you simply import Recess.js into your React App.
Here is an Example:
```jsx
import Recess from 'recessjs';
import './App.css';
// Used below to show an example but not required.
import styled from 'styled-components';
/*
Recess.js is the only thing you need to install.
You only need to import 3 things (Recess, Your code & Theme).
(Or only 2 things since a default theme is in place)
1.) import Recess from 'recessjs';
2.) import code from './code.js';
3.) import theme from 'prism-react-renderer/themes/';
The themes that you can import and use are located at:
https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes
*/
// A JavaScript file to store the code for Recess.js
import code from './code';
// The chosen theme for Recess.js
// Change "github" to the name of the theme you want.
// Eazy Peazy! Dracula is the default.
import theme from 'prism-react-renderer/themes/github';
import otherTheme from 'prism-react-renderer/themes/dracula';
function App() {
return (
{/* Works because of default settings */}
OR
{/* Your chosen code to be rendered in Recess.js */}
OR
{/* Your chosen code and theme */}
OR
{/* dep is your chosen dependencies like styled-components */}
{/* Install them within your main app and import. */}
{/* Then pass them to dep. */}
{/* To pass multiple dependencies place them in an object. */}
{/* Like this: dep={{styled, bulma, etc.}} */}
OR
{/* filename is set to 'App.js' by default. */}
{/* The filename is displayed at the top of Recess.js */}
{/* onInline is set to true by default. Pass it false if desired. */}
);
}
export default App;
```
Here is a snapshot of Recess.js without any arguments.
Behold in all of it's default goodness:
**It is REQUIRED to include the render function at the end of each react app as you can see in the code.js file example below:**
```jsx
const code = `const App = () => {
return (
Hello Kaycee!
);
}
render();
`;
export default code;
```
You could also export an object with multiple code examples for Recess.js like so:
```jsx
const code = {
firstExample:
`const AppOne = () => {
return (
Hello Kaycee!
);
}
render();`,
secondExample:
`const AppTwo = () => {
return (
Hello William!
);
}
render();`
};
```
Roadmap:
- Toolbar option (copy-to-clipboard, reset-code, save, etc.)
- The rest is Top Secret =)
Cheers
Kaycee Ingram