mfrancois3k / useTrace.js

Created March 21, 2022 17:12 — forked from hanford/useTrace.js

	// @flow

	import * as React from 'react';

	// inside functional components, you can drop this hook
	// and be notified when the modified component re-renders.
	// this component will also tell you _why_ it was re-rendered
	export default function useTraceUpdate(props: any) {
	const prev = React.useRef(props);
	React.useEffect(() => {

mfrancois3k / advanced-react.md

Created March 21, 2022 17:15 — forked from ryanflorence/advanced-react.md

Advanced React Outline

1. Intro

Our Company
- Quick history
- React Router
- Reach UI
20 Minute React™
- "Declarative", "Composable", "Functional"
- show off most APIs all at once, build up a little sort/filter searchable list
Review "React Application Anatomy"

mfrancois3k / Matrix.jsx

Created March 21, 2022 17:17 — forked from blopa/Matrix.jsx

Matrix Rain effect with a React functional hooks component

	import React, { useEffect, useRef } from 'react';

	function MatrixBackground({ timeout = 50 }) {
	const canvas = useRef();

	useEffect(() => {
	const context = canvas.current.getContext('2d');

	const width = document.body.offsetWidth;
	const height = document.body.offsetHeight;

mfrancois3k / useDelayedEffect.js

Created March 21, 2022 17:18 — forked from Muzietto/useDelayedEffect.js

useDelayedEffect - using setTimeout in React functional components (custom hook)

	import { useEffect, useRef } from 'react';

	function useDelayedEffect(effect, changingStateVars = [], delay = 1000) {

	const mutable = useRef();

	const delayedEffect = () => {
	mutable.current = setTimeout(effect, delay);
	return () => {
	clearTimeout(mutable.current);

mfrancois3k / css-variables.html

Created March 24, 2022 21:40 — forked from m1k3yfoo/css-variables.html

[CSS Variables] #JavaScript, #CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Scoped CSS Variables and JS</title>
	</head>
	<body>
	<h2>Update CSS Variables with <span class='hl'>JS</span></h2>

	<div class="controls">

mfrancois3k / Button.module.css

Created March 24, 2022 21:41 — forked from DanielCeron-dc/Button.module.css

Custom Button React-typescript

	/* the variables are in another gist CSS-VARIABLES */
	.button {
	background: var(--primary);
	border: 1px solid var(--primary-dark);
	color: white;
	padding: 10px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;

mfrancois3k / useTheme.tsx

Created March 24, 2022 21:43 — forked from DanielCeron-dc/useTheme.tsx

useTheme

	import React, { useEffect } from 'react';

	const changeCssVariable = (name: string, value: string) => {
	document.documentElement.style.setProperty(name, value);
	};

	const changeTheme = (type: 'light' \| 'black' \| 'dark') => {
	switch (type) {
	case 'light':
	changeCssVariable('--color1', 'white');

mfrancois3k / Loader.module.css

Created March 24, 2022 21:43 — forked from DanielCeron-dc/Loader.module.css

loading box

	.loader {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: rgb(31, 31, 31);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .5s;
	color: white;

mfrancois3k / useWindowDimensions.ts

Last active August 30, 2022 23:33 — forked from DanielCeron-dc/useWindowDimensions.ts

	import React, { useState } from 'react';

	// https://gist.githubusercontent.com/mfrancois3k/8c65cb0eca62d65cf213cb072e5016f1/raw/7e35a50ea8897025526cbed48fdb3acf70684729/SignupComponent.js


	const useWindow = (): {isMobile:boolean, isTablet:boolean, isDesktop:boolean} => {

	const [isMobile, setIsMobile] = useState(false);
	const [isTablet, setIsTablet] = useState(false);
	const [isDesktop, setIsDesktop] = useState(true);

mfrancois3k / gist:0aa59e467b77aedaad6d08e16c714f98

Created March 24, 2022 21:48 — forked from jacobparis/gist:4cc548459d0c5d293ab1be4566438f47

Simply and easily with Styled components npm install styled-components

Thats all you need to do. Really! That’s why I love it! No Babel, no Webpack, no CSS pre or post processing. Only JavaScript and nothing else.

CSS in JS

“You mean CSS in JS? Man, that’s weird. I would never do that!” Don’t panic. Just let me show you few examples why this is a great idea. But let’s write some Styled component first:

import styled from 'styled-components;