Skip to content

Instantly share code, notes, and snippets.

Avatar
🌐
Remote by default

Hans Christian Reinl drublic

🌐
Remote by default
View GitHub Profile
View useHasLoader.ts
// Testable Custom Hooks
import { useEffect } from "react";
// Function that can be tested with clear API, easily unit-testable
const handleHasLoader = ({ isLoading, hasFocus, setHasLoader }) => {
if (isLoading && !hasFocus) {
return setHasLoader(true);
}
return setHasLoader(false);
@drublic
drublic / Button.tsx
Last active Sep 21, 2019
Conceptual Hooks
View Button.tsx
// Presentational Component
// contains only the UI and has a clear UI (props) for testing
import React from "react";
import Loader from "../Loader";
const Button = ({ onFocus, onBlur, hasLoader, label }) => (
<button type="button" onFocus={onFocus} onBlur={onBlur}>
{hasLoader ? <Loader /> : label}
</button>
@drublic
drublic / Button.tsx
Last active Sep 21, 2019
Without Conceptual Hooks
View Button.tsx
import React, { useState, useEffect, useCallback } from 'react';
import Loader from '../Loader';
const Button = ({ label, isLoading }) => {
const [hasFocus, setHasFocus] = useState<boolean>(false);
const [hasLoader, setHasLoader] = useState<boolean>(false);
const handleFocus = useCallback(() => {
setHasFocus(true);
}, []);
const handleBlur = useCallback(() => {
@drublic
drublic / Card.jsx
Last active Sep 7, 2019
Component JS to TS
View Card.jsx
// This is an exisiting React Component written as a Function Component using JavaScript.
import React from "react";
import { string, any } from "prop-types";
const Card = ({
headline,
createdAt,
children,
}) => {
View tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"noImplicitAny": false,
View mute.automator
on run {input, parameters}
set inputVolume to input volume of (get volume settings)
if inputVolume = 0 then
set inputVolume to 35
set displayNotification to "Microphone Unmuted"
else
set inputVolume to 0
set displayNotification to "Microphone Muted"
end if
View .hyper.js
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 12,
// font family with optional fallbacks
fontFamily: 'Consolas, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: 'rgba(248,28,229,0.8)',
View module.js
/**
* Module
*/
// External Library
import _ from '../node_modules/lodash/dist/lodash.js';
// Private variables
let _eventName = '_test';
@drublic
drublic / dabblet.css
Created Aug 4, 2014
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
div {
border-radius: 50%;
height: 200px;
background: #ddd;
width: 200px;
}
You can’t perform that action at this time.