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