React-codepen-editor NPM

react-codepen-editor

Install

npm install --save react-codepen-editor

Features

Excellent mobile support 📱
Dark & light themes 🌗
Smooth transitions between themes 🌊
Resettable codepen 🔄
Code highlighting (more colors coming soon) 🏳️‍🌈

Usage

import React from 'react'

import CodepenEditor from "react-codepen-editor";
import "react-codepen-editor/dist/index.css"

const App = () => {

  const CSS = `button {\n    font-size: 40px;\n    margin: 10px;\n}`;

  const HTML = `<button onclick="foo()" id="btn">\n    Click me!\n</button>`;

  const JS = `function foo() {
    let btn = document.getElementById("btn");
    btn.innerHTML = "I've been clicked!";\n}`;

  render() {
    return <CodepenEditor 
      CSS={CSS}
      HTML={HTML}
      JS={JS}
      initial="CSS"
      mobileQuery={800}
      height="400px"
      themeTransitionSpeed={150}/>
  }
}

Demo

See it on Github Pages.

Props

All of the props are optional.

Prop	Type	Default	Description
`HTML`	string	`""`	The HTML code block that will be generated in the 'HTML' textarea.
`CSS`	string	`""`	The CSS code block that will be generated in the 'CSS' textarea.
`JS`	string	`""`	The JavaScript code block that will be generated in the 'JS' textarea.
`initial`	string	`"HTML"`	Editor that will be displayed first to the user. Possible values: `"HTML"`, `"CSS"`, `"JS"`.
`theme`	string	`"dark"`	The color theme of the component. Possible values: `"light"`, `"dark"`.
`themeTransitionSpeed`	number	`0`	How fast (in milliseconds) colors should switch from one theme to another.
`resettable`	bool	`true`	If the codepen is resettable or not.
`mobileQuery`	number	`0`	The number (in pixels) at which the component should display for mobile. If the value `800` is provided, the component will be in mobile view from `0px` to `800px`.
`height`	string	`"350px"`	Height (in pixels) of the container.

Styling

By default, the component will take 100% of its parent width. Height can be changed via the height prop. For mobile support, see the mobileQuery prop.

Contributing

We welcome your contribution! Fork the repo, make some changes, submit a pull-request! If there are any issues with the component, let us know via Issues.