segunadebayo

// Using className

import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const NavLink = ({ children, activeClassName, ...props }) => {
  const router = useRouter();
  const child = React.Children.only(children);
  

segunadebayo

import NextHead from 'next/head'
import React from 'react'
import ReactGA from 'react-ga'
import Router from 'next/router'

// GA Tracking Id
const gaTrackingId = '[GOOGLE ANALYTICS TRACKING ID GOES HERE]'


Router.onRouteChangeComplete = () => {

segunadebayo

import React from "react";
import { useButton, mergeProps } from "reakit";

function Button(props) {
  // useButton should be used when the props are being applied to a non-button element
  const button = useButton();
  return <div {...mergeProps(button, props)} />;
}

// return value of useButton

segunadebayo

/*

In JavaScript, objects can be used to serve various purposes.

To maximise our usage of the type system, we should assign different types to our objects depending
on the desired purpose.

In this blog post I will clarify two common purposes for objects known as records and dictionaries
(aka maps), and how they can both be used with regards to the type system.

segunadebayo

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

• Accessible
• Composable
• Stylable

segunadebayo

const machine = Machine({
    id: "menu-button",
    initial: "unmounted",
    context: {
      button: null,
      menu: null,
      items: [],
      search: "",
      highlightIndex: -1
    },

segunadebayo

const menuButtonMachine = new Machine(
  {
    id: "menu-button",
    initial: "idle",
    context: {
      activeIndex: -1,
      items: [1, 2, 3],
      focused: ""
    },
    states: {

segunadebayo

import React, { Component } from "react";
import { Switch, Route, Link } from "react-router-dom";
import "./app.css";

const Home = () => <div>You're on the Home Tab</div>;
const Photo = ({ location }) => {
  const { state = {} } = location;
  const { modal } = state;
  return (
    <div className={modal ? "modal" : undefined}>

segunadebayo

import * as React from "react";

const storageKey = "chakra-ui-color-mode";
const cx = (mode: ColorMode) => `chakra-ui-${mode}`;
const supportsLocalStorage = typeof Storage !== "undefined";

const getBodyElement = () => {
  // for SSR
  const mockBody = {
    classList: {

segunadebayo

Random color from string in javascript

Consider a list of strings you need to permanently assign a random color.

First you should turn the string into a hash.

var string = "string"
var hash = 0