React component to embed codepen project
npm install react-codepen-embedReact component for embedding pens from Codepen.io
``bash
#using npm cli
npm install --save react-codepen-embed
#using yarn
yarn add react-codepen-embed
`
`javascript
import React from "react";
import Codepen from "react-codepen-embed";
const CodepenEmbedded = () => {
return
};
`
| Property | Type | Required | Default | Description |
| ---------- | --------- | -------- | ------------ | -------------------------------------------------------------- |
| hash | string | true | | Id of the pen to embed |string
| user | | true | | Codepen username |number
| height | | false | 300 | Height of the pen |element
| loader | | false | | Loader to render while the pen is being embedded or errors out |string
| defaultTab | | false | css,result | Default tab to display |string
| themeId | | false | dark | Theme for the pen |boolean
| preview | | false | true | Make the preview "Click-to-Load" |boolean
| editable | | false | false | Can edit code |string
| title | | false | | Title of the pen |
#### Props.loader
Compenent to render when the pen is being embedded or when it errors.
`js`
user="shettypuneeth"
loader={() => Loading...}
/>
If the embed fails then the loader component will receive an error prop
`js``
const Loading = props => {
if (props.error) {
return Error;
}
return Loading...;
};