Credit https://unsplash.com/photos/4003Ofy-HJE

Create a simple react-head component using react portals

I like React and its ecosystem but I don’t like the idea of installing hundreds of dependencies for everything. And I don’t want to use any extra libraries especially when I am building things like PWA, every byte counts so I always try to avoid “npm install another-library”

So for one of my projects, I needed Head component, similar to React Head or React Helmet but I didn’t like the API of one and the size of another. So I was looking for simple and better for my case solution.

Using React Portals seems quite a good idea and doesn’t require any external dependencies. All you need to do is create a portal with document head as a root and render inside that portal.

Afterwards, you can use it like so:

I also prefer creating a helper component for that:

and I use it like:

That is all.
No dependency simple solution.
I guess you still might consider some of the mentioned libraries if you need more advanced functionality, SSR for example.

web developer obsessed by making web better ( focused on web perf and a11y )

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stoyan Delev

Stoyan Delev

web developer obsessed by making web better ( focused on web perf and a11y )

More from Medium

How to Work with the React Context API and React useContext Hook

Styling CSS Dasar | ReactJS

https://reactjs.org/logo-og.png

Introduction to React Js

React JS / Components , props and state