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.

Maintainers

jobess7

Would gladly accept a new maintainer to help out!

License

MIT © JoBess7