Skip to content

Instantly share code, notes, and snippets.

View ohansemmanuel's full-sized avatar

Ohans Emmanuel ohansemmanuel

942 followers · 12 following
View GitHub Profile
@ohansemmanuel
ohansemmanuel / sample-custom-hook.js
Created March 26, 2019 06:40
// 🐢 custom hook - name starts with "use" (useMedium)
useMedium(() => {
const URI = "https://some-path-api";
// 🦄 custom hook can use any of the default
// React hooks - this is NOT compulsory.
useEffect(() => {
fetch(URI)
},[])
})
@ohansemmanuel
ohansemmanuel / effect-counter-timer.js
Created March 26, 2019 06:36
function CounterHooks() {
const [count, setCount] = useState(0);
const [time, setTime] = useState(new Date())
// 🐢 look here.
useEffect(() => {
console.log("useEffect first timer here.")
}, [count])
@ohansemmanuel
ohansemmanuel / hooks-counter-timer.js
Created March 26, 2019 06:32
function CounterHooks() {
const [count, setCount] = useState(0);
const [time, setTime] = useState(new Date())
const handleClick = () => {
setCount(count + 1);
setTime(new Date())
}
return (
@ohansemmanuel
ohansemmanuel / hooks-counter.js
Created March 26, 2019 06:23
function CounterHooks() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<div>
<h3 className="center">
@ohansemmanuel
ohansemmanuel / class-counter.js
Created March 26, 2019 06:05
import React, { Component } from 'react';
class Counter extends Component {
constructor() {
super();
this.state = {
count: 1
};
}
@ohansemmanuel
ohansemmanuel / apply-paint.html
Created March 24, 2019 18:07
<!DOCTYPE html>
<head>
<style>
header {
background-image: paint(checker);
}
</style>
</head>
@ohansemmanuel
ohansemmanuel / draw-checker.js
Created March 24, 2019 18:06
...
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
@ohansemmanuel
ohansemmanuel / checker-loop.js
Created March 24, 2019 18:04
...
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
}
}
...
@ohansemmanuel
ohansemmanuel / paint-checker-loop.js
Created March 24, 2019 18:03
// declare the custom paint.
class CheckerPaint {
paint (ctx, geom, styleMap) {
const colors = ["#f15278", "#fff"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
@ohansemmanuel
ohansemmanuel / paint-code-start.js
Created March 24, 2019 18:02
// declare the custom paint.
class CheckerPaint {
paint (ctx, geom, styleMap) {
const colors = ["#f15278", "#fff"];
const size = 32;
}