I’ve been continuously working to improve my Kulor project recently as a way to improve my skills around React. If you’ve seen or used the web app then you will know what it does. For those who haven’t, simply put, it’s a colour converter. The repository gives you more information about what features it has and what improvements are up and coming, so please check it out kulor-reactify.
One of the most recent issues I was trying to solve led me to implementing a gooey style navigation effect for displaying the buttons. This navigation was supposed to be a way of solving a lack of screen real estate that is found on mobile devices. I wanted to add something where I could show and hide the buttons as and when they are needed. The main issue I have found here is the support for SVG filters isn’t so good on mobile, noticeably so on Safari for my iPhone. This means that this feature probably won’t make it into production.
But all is not lost, it gave me an opportunity to work with SVG which I’ve been waiting to do for a while now. One of the stand out pieces of gooey navigation I found was from a guest author called Lucas Bebber on CSS-Tricks. This article gives you a great run down of how to implement this effect in various ways in standard HTML and no frameworks. But in order ti integrate it with my work, I would need to port it across to the React world.
Firstly, it was simple enough to move across the HTML. I created a container to handle the navigation as whole which would process the methods, props and variables. Then, I created a dumb component to be looped over for the navigational items and simply consume whatever is passed to them. A lot of this work was already done because of the other containers and components within my project defining the approaches already taken. The styles were even easier to transfer across with the project using SCSS already, I simply created a new file to home these styles and Webpack handles the rest.
The greatest challenge was integrating the SVG elements correctly. This was done by creating a new component to simply export the SVG element. I then load this onto the DOM by using
componentWillMount() inside our container, and appending the component as a new child node of the DOM. To quote Facebook…”
componentWillMount() is invoked immediately before mounting occurs. It is called before
render()” which means the SVG should be loaded onto the DOM before we render all our containers and components.
Voila! We have some nice navigation within our page integrated using React. It work pretty sweet on desktop and as I’ve mentioned doesn’t so much on mobile. But it does fallback quite well, simply misses the blurring which is what gives it it’s gooey effect. Slightly annoying but a great little project all the same. The source code and working demo can be found here if you want to check it out: