Skip to content

Instantly share code, notes, and snippets.

Avatar
🤠
Howdy!

Zaydek zaydek

🤠
Howdy!
View GitHub Profile
View styled-components-vs-css-prop.js
// styled component version
const Container = styled.div`
/*all of the styles*/
`
function MyComponent() {
return <Container>{/*other stuff*/}</Container>
}
// css prop version
View useFsmReducer.ts
import { useEffect, useReducer } from 'react';
type State<TState, TEffect> = TState & {
effects?: TEffect[];
};
export type UseFsmReducerEffects<TAction, TEffect extends { type: string }> = {
[K in TEffect['type']]: (params: {
effect: Extract<TEffect, { type: K }>;
dispatch: (action: TAction) => void;
@iansu
iansu / README.md
Last active Sep 29, 2020
Create React App 4.0 Alpha Testing
View README.md

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@danestves
danestves / aspect.css
Created Feb 13, 2020
Aspect Radios to use with tailwindcss
View aspect.css
.embed-responsive {
@apply relative;
}
.embed-responsive::before {
@apply block;
content: "";
}
.embed-responsive .embed-responsive-item,
View connection.go
package main
import (
"context"
"database/sql"
"encoding/base64"
"encoding/json"
"fmt"
"time"
@sbatson5
sbatson5 / multiple-firestore-queries.js
Last active Feb 26, 2020
Multiple firestore queries
View multiple-firestore-queries.js
const firebase = require('firebase');
function getCurrentEventsByStateForAdmins(state) {
const db = firebase.firestore();
db.collection('events')
.orderBy('expirationDate', 'asc')
.where('expirationDate', '>', new Date().toISOString())
.where('state', '==', state)
.where('isAdmin', '==', true)
View Components.js
const MarkdownArray = [
// `<Comment />`.
{ syntax: /^\/\/(.*)(?:$|\n)/,
parser: (key, [children]) => <Comment key={key} children={parseText(children)} /> },
// `<Header />`.
{ syntax: /^(#{1,6})( .*)(?:$|\n)/,
parser: (key, [open, children]) => <Header key={key} open={open} children={parseText(children)} /> },
@gaearon
gaearon / uselayouteffect-ssr.md
Last active Oct 13, 2020
useLayoutEffect and server rendering
View uselayouteffect-ssr.md

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
You can’t perform that action at this time.