<CodePen />

A react component to embed codepen

English | 简体中文

Getting Started

# NPM
$ npm install codepen-react -S

# Yarn
$ yarn add codepen-react

# pnpm
$ pnpm 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

Copyright (c) 2021 Leedom
Licensed under the MIT license.