Category Archives: ReactJS

React-FontAwesome – Overlay an icon with a number

Hi everyone,

A quick post on how to overlay a number counter on a comment icon with react-fontawesome:


This will show up as the following:


Simple React-Leaflet Location Picker Setup

Hi everyone,

Just thought I’d share a very simple react-leaflet setup in case it’s able to help anyone.


Add the css and javascript for leaflet to public > index.html:">

Install react-leaflet via npm or yarn, also add the dependencies:

npm install react-leaflet # npm
npm install leaflet react react-dom # npm

yarn add react-leaflet # Yarn
yarn add leaflet react react-dom # Yarn

Create the map component:

import React, { useState } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'

const MapSimple = () => {

    const [location, setLocation] = useState({
        lat: 51.505,
        lng: -0.09,
        zoom: 13,
    const position = [, location.lng];
    const setMarkerPosition = e => {
        setLocation({ ...e.latlng, zoom: 19 });
        console.log(`My location is: ${JSON.stringify(e.latlng, null, 3)}`)

    return (
                attribution='© OpenStreetMap contributors'
                   A sample popup.

export default MapSimple;

Request Denied – react-geocode

Hi everyone,

I’m currently testing react-geocode but hit a “request denied” error after providing my API key.

Error: Server returned status code REQUEST_DENIED

The solution was pretty simple thankfully – enable the Geocoding API for your project:

In my case I was re-using a Google maps key from another project where I’d enabled all of the map apis but not the GeoCoding one.

Module not found: Can’t resolve ‘leaflet’ in – react-leaflet error

Hey everyone,

I ran into the following error after installing react-leaflet and attempting to run an example:

Module not found: Can’t resolve ‘leaflet’ in ‘…\node_modules\react-leaflet\es’

It turned out I’d simply rushed things and skipped the second step in the documentation:

npm install leaflet react react-dom # npm
yarn add leaflet react react-dom # Yarn


Typography Component without a Line Break – Material-UI

Hey everyone,

In new versions you now need to add a display attribute: display=”inline”

I’ve been working with Material-UI and ReactJS and had a bit of an issue with a Typography component generating an unwanted link break:

download (1)

To fix it, all I needed was the inline attribute. Once added the text appeared next to the form element instead of below:
download (3)

Unable to find a dom node for 19 – Slate.js

Hi everyone,

I ran into the following error while attempting to add an image to a slate.js editor today:

slate.js unable to find dom node for 19

The solution was to add a simple schema to my editor:

const schema = {
    blocks: {
        image: {
            isVoid: true
    onFocus={() => { this.setState({ changed: true }); }}

There’s more on schemas in the official documentation:

String to Color – Avatar Helpers

Hi everyone,

A quick post on a helper function I came across for generating avatars. This function generates a random color for the specified string:

export const stringToColor = string => {

let hash = 0;
let i;

for (i = 0; i < string.length; i += 1) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);

let colour = '#';

for (i = 0; i > (i * 8)) & 0xff;
colour += `00${value.toString(16)}`.substr(-2);

return colour;

Thanks to oliviertassinari: