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

Create a simple react-head component using react portals

Stoyan Delev
1 min readFeb 5, 2019

--

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.

--

--

Stoyan Delev

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