Category Archives: ReactJS

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

Advertisements

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.

Uncaught SyntaxError: Unexpected token < – ReactJS Build

Hi everyone,

A ReactJS issue I ran into after running npm run build:

Uncaught SyntaxError: Unexpected token <

This one took a while to track down but it essentially boils down to the built index.html file referencing paths relatively:

Issue: index.html was referencing
"</html".

Instead of:
"</html".

This meant that anytime a page was accessed directly it attempted to load the static files from the wrong directory. To fix it, I had to update the homepage node in package.json

Original:
...
"version": "0.1.0",
  "homepage": "./",
  "private": true,
...

Instead use:
"version": "0.1.0",
  "homepage": "/",
  "private": true,

Hopefully that’s able to help someone else out, took a while to track down!

npm ERR! missing script: flow npm ERR! A complete log of this run can be found in: – ReactJS and Flow

Hi everyone,

I ran into the following error while trying to setup flow:

npm ERR! missing script: flow
npm ERR! A complete log of this run can be found in:

To fix this, just add “flow”: “flow” as a new entry under “scripts” in your package.json file.

See the following link for more info:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow

Including an Externally Hosted Script in ReactJs

Hi everyone,

Just a quick example of how to include an externally hosted js file in a reactjs app. In index.html add your script tag as you would in a normal app:

  
    https://js.prelive.promisepay.com/PromisePay.js
  

Then in the file you plan to use the library you can add a const and reference it normally:

const promisepay = window.promisepay;

Thanks to this link for the info: https://stackoverflow.com/a/44877953/522859

Allow Number and String for PropTypes – ReactJS

Hi everyone,

A quick post on how to allow a string or number when defining PropTypes:

static propTypes = {
        numberField: PropTypes.number.isRequired,
        stringField: PropTypes.number.isRequired,
        mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
    }

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/41808543/522859