Segun Adebayo segunadebayo

Reach UI Philosophy

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

The three equally important goals are to be:

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

	// 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);

	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 = () => {

	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

	/*

	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.

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

	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}>

	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: {