This post is a long time coming. Ever since I started Frontend Development, especially with React, I was overwhelmed by the amount of support online. Countless people putting their time and energy into building cool things and then publishing them for free. I wanted to do be a part of it too. And finally I have.

So, what is this package about? It is a React component react-codepen-embed that lets you embed pens from codepen.io into React apps. You can install it by typing:

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

And then use it in your app as—

import React from 'react';
import Codepen from 'react-codepen-embed';
 
const CodepenEmbedded = () => {
  return (
    <Codepen
      hash="JyxeVP"
      user="shettypuneeth"
    />
  );
}

The pen is embedded as a p tag, as recommended by codepen.io rather than embedding it as an iframe.

The code is published on github.

If you are newbie like me when it comes to publishing packages, I found this article to be very helpful.

Few things learnt along the way

Versioning

README.md

Dependencies

Since you're publishing a package that gets consumed by others you need to get the dependencies right.

dependencies—Required for your library to work. In case of my project, it has a dependency on prop-types package.

devDependencies—Libraries required during the development of the project. e.g. babel

peerDependencies—If your package builds on top of or depends on another library then it is listed as a peerDependency. The user needs to have this dependency installed for the library to work else npm throws a warning.

{
    "name": "react-codepen-embed",
    "dependencies": {
        "prop-types": "^15.5.0"
    },
    "devDependencies": {
        "babel-cli": "^6.24.1"
    },
    "peerDependencies": {
        "react": "*"
    }
}

Do give it a try and please let me know what you think.