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>;
};