ts-react-codepen-embed v0.4.0

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

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. :)