Category Archives: ReactJS

Overwrite Selected Tree View Item Styles – Material UI ReactJS

Hi everyone,

Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS:

treeItem: {
paddingTop: theme.spacing(1),
‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: {
backgroundColor: ‘red’,
}
},

This will make the background color red for ONLY the selected item:
material-ui-tree-view

Cheers,
Chris

Missing .tsconfig when converting existing ReactJS project

Hi everyone,

I’ve finally decided to start learning typescript while working on a side project. The plan was to convert the existing project over using the following command:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

After restarting the web server I had expected to see a tsconfig.json file that would allow me to setup my preferred configuration. Unfortunately, mine was missing.

A bit of Googling revealed that the tsconfig file isn’t actually generated until you add a .ts or .tsx file to the project. In my case, I simply renamed an existing component and the configuration file was generated during the next startup. Note that you will also have to remove your jsconfig.json file (if you haven’t already).

Thanks to this blog for the detailed info: https://blog.bitsrc.io/why-and-how-use-typescript-in-your-react-app-60e8987be8de

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.

screencast-localhost_3889-2019.08.24-14_01_41.gif

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

  
https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">https://unpkg.com/leaflet@1.5.1/dist/leaflet.js

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.lat, location.lng];
    
    const setMarkerPosition = e => {
        setLocation({ ...e.latlng, zoom: 19 });
        console.log(`My location is: ${JSON.stringify(e.latlng, null, 3)}`)
    };

    return (
        
            <TileLayer
                attribution='© OpenStreetMap contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            
                
                   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: https://developers.google.com/maps/documentation/geocoding/get-api-key

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

Doco: https://react-leaflet.js.org/docs/en/installation.html

Typography Component without a Line Break – Material-UI

Hey everyone,

UPDATE:
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:
Capture
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
        }
    }
};
    spellCheck
    autoFocus
    ref={this.ref}
    value={this.state.value}
    onChange={this.onChange}
    onKeyDown={this.onKeyDown}
    onDrop={this.onDropOrPaste}
    onPaste={this.onDropOrPaste}
    renderNode={this.renderNode}
    renderMark={this.renderMark}
    className={classes.editor}
    readOnly={readOnly}
    onFocus={() => { this.setState({ changed: true }); }}
    schema={schema}

There’s more on schemas in the official documentation: https://docs.slatejs.org/guides/schemas

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: https://github.com/oliviertassinari/SplitMe/blob/c25fe62187a856386fd0c43c51859d6f973d651e/src/main/member/Avatar.js#L8-L26

NavLink ListItems not Applying activeClassName class when Clicked On – ReactJS React-Router MaterialUI

Hi everyone,

A bit of a hairy issue I ran into today that took a while to track down. I’m using React Router with Material UI to render a Drawer as a sidebar:

The issue was that some links were not applying the expected activeclass:


	
		
	
	<ListItemText primary={
		
			About
		
	} />

After trawling through react-router I eventually found a post on github that mentioned a similar issue: https://github.com/ReactTraining/react-router/issues/4638

The solution turned out to be wrapping all relevant components with withrouter.