A react component to embed codepen
English | 简体ä¸ć–‡
# NPM
$ npm install codepen-react -S
# Yarn
$ yarn add codepen-react
# pnpm
$ pnpm add codepen-reactimport React from 'react'
import CodePen from 'codepen-react'
export default class CodeBox extends React.Component {
render() {
return (
<CodePen
user="leedom92"
hash="gOLvgRe"
/>
)
}
}| 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. |
Copyright (c) 2021 Leedom
Licensed under the MIT license.