Codepen-react NPM

<CodePen />

A react component to embed codepen

Getting Started

# NPM
$ npm install codepen-react -S

# Yarn
$ yarn add codepen-react

Usage

import React from 'react'
import CodePen from 'codepen-react'

export default class CodeBox extends React.Component {
  render() {
    return (
      <CodePen
        user="leedom92"
        hash="gOLvgRe"
      />
    )
  }
}

Options

Property	Type	Argument	Values	Default	Description
type	`string`	`<optional>`	`iframe, embed`	`iframe`	the type of the codepen.
user	`string`	`<required>`		`null`	codepen username.
hash	`string`	`<required>`		`null`	the hash id of the pen to display.
width	`string`	`<optional>`	`'', %`	`100%`	the width of the pen.
height	`string`	`<optional>`	`'', %`	`400`	the height of the pen.
title	`string`	`<optional>`		`''`	the title of the pen.
theme	`string`	`<optional>`	`light, dark`	`light`	the theme the pen should use.
editable	`bool`	`<optional>`	`true, false`	`true`	the editable of the pen.
preview	`bool`	`<optional>`	`true, false`	`false`	the preview of the pen. u must run pen manually.
tab	`string`	`<optional>`	`html, css, js, result`	`result`	the default tab that should be displayed.

License

react react-component codepen embed

prop-types

@everything-registry/sub-chunk-1350

1.0.1

3 years ago

1.0.0

3 years ago