Publishing my first NPM package
April 8, 2018

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 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 (

The pen is embedded as a p tag, as recommended by 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


To make it easy for the consumers to keep up with the future releases it's better to follow a convention for versioning, like semver.This link talks about semantic versioning in detail.

Make sure to have a descriptive readme with details and usage examples as this gets displayed on github and on npm. Read this post on how to write an effective readme file.


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.