ts-react-codepen-embed

React component for embedding pens from Codepen.io, with responsive height and ability to embed multiple pens in the same page this time

TL;DR

This is a fork of shettypuneeth/react-codepen-embed, which is a great library to embed our Codepen project as a Component in our React app.

However, I need the following few features as well so I had decided to work on top of the above:

• Responsive Height for the embedded pens
  • So that the height is proportional to the window width and, in my humble opinion, looks better
• Allowing the embedding of multiple pens without firing the Codepen scripts multiple times
  • Otherwise some of the scripts would fail and refuse to render
• Migrate the source to TypeScript
  • Personal preference but I think TypeScript rules :-)
• Added automated tests coverage
  • Let me Google that for you: automated tests importance
• Reinventing the wheel

Installation

#using npm cli 
npm install --save ts-react-codepen-embed
 
#using yarn 
yarn add ts-react-codepen-embed

Usage

import React from "react";
import Codepen from "ts-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"
title	string	false		Title of the pen
shouldLoadScript	boolean	false	true	To load the codepen embed script or not
overrideAsLoaded	boolean	false		To override the loaded state

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

The loader component will receive a isLoading prop when it is, obviously, loading

const Loading = props => {
  if (props.isLoading) {
    return <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>;
};

Acknowledgement

This repository is forked from shettypuneeth/react-codepen-embed so kudos to shettypuneeth. :)