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

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