Alasdair McLeay penx

React consultant

penx / react-router-4-universal-404-routes.js

Created February 1, 2017 17:53

	/**

	Example usage of React Router 4 to handle:

	- Known routes to render a specific component, e.g. /
	- An array of valid top level slugs, e.g. /:pageId
	- A dictionary of top level slugs that should redirect, e.g. /:redirectId
	- An array of valid slugs for a known subroute, e.g. /items/:itemId
	- 404 for anything that is not handled, including invalid slugs, with a correct http response
	- Server side example, but ReactApp is written so that routing would work universally

penx / App.js

Created March 12, 2020 12:05

https://codesandbox.io/s/basic-context-usestate-jqk3g

	import React, { useState, createContext, useContext } from "react";

	const MyContext = createContext();

	const Provider = props => {
	const [value, set] = useState("initial");
	return <MyContext.Provider value={{ value, set }} {...props} />;
	};

	const Value = () => {

penx / App.js

Created March 12, 2020 12:07

	import React, { useState, createContext, useContext } from "react";

	const SetContext = createContext();
	const ValueContext = createContext();

	const Provider = props => {
	const [value, set] = useState("initial");
	return (
	<SetContext.Provider value={set}>
	<ValueContext.Provider value={value} {...props} />

penx / App.js

Created March 12, 2020 12:09

	import React, { useState, createContext, useContext } from "react";

	const SetContext = createContext();
	const ValueContext = createContext();

	const Provider = props => {
	const [value, set] = useState("initial");
	return (
	<ValueContext.Provider value={value}>
	<SetContext.Provider value={set} {...props} />

penx / App.js

Created March 12, 2020 12:11

	import React, { useState, createContext, useContext } from "react";

	const SetContext = createContext();
	const ValueContext = createContext();

	const SetProvider = React.memo(({ set, ...props }) => (
	<SetContext.Provider value={set} {...props} />
	));

	const Provider = props => {

penx / features.md

Last active October 9, 2023 15:47

CSS preprocessors

Feature	Example	Standards-only approach
Nested selectors	Sass Style Rules	CSS Nesting Module Level 3
Importing (Coupling, from JavaScript, dead code removal)	webpack css-loader	@import Cascading Stylesheet Module scripts (2)
Bundling	webpack	Multiple stylesheets per file
Variables	Sass Variables	CSS custom properties (variables)
Calculations	Sass operators and functions	[CSS calc](https://developer.mozilla.org/

penx / index.html

Created December 6, 2023 11:45

Radix themes/chromium issue