Skip to content

Instantly share code, notes, and snippets.

Avatar

Robbie Leib robertleib

View GitHub Profile
@nmn
nmn / pureFunctions.js
Last active Aug 29, 2015
Quick and dirty hack to make pure functions work in React:
View pureFunctions.js
function component(fn){
class C extends React.Component {
render(){
return fn(this.props, this.context)
}
}
C.displayName = fn.displayName || fn.name
C.propTypes = fn.propTypes
C.contextTypes = fn.contextTypes
return C
View App.Combobox.jsx
import React, { Suspense, useState } from "react";
import { unstable_createResource as createResource } from "react-cache";
import {
Autocomplete as Combobox,
Input as ComboboxInput,
List as ComboboxList,
Option as ComboboxOption
} from "./Combobox";
function App({ tabIndex, navigate }) {
@iammerrick
iammerrick / LazilyLoad.js
Last active Aug 7, 2019
Lazily Load Code Declaratively in React + Webpack
View LazilyLoad.js
import React from 'react';
const toPromise = (load) => (new Promise((resolve) => (
load(resolve)
)));
class LazilyLoad extends React.Component {
constructor() {
super(...arguments);
@tkafka
tkafka / LICENSE.txt
Last active Sep 5, 2019
Drop-in replacement for ReactCSSTransitionGroup that uses velocity.js instead of CSS transforms. Add your own transitions to `transitions` hash.
View LICENSE.txt
The MIT License (MIT)
Copyright (c) 2014 Tomas Kafka
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
View *tracked.md

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

@kennetpostigo
kennetpostigo / Migrating.md
Last active Jun 2, 2021
How I migrated from ReactRouter v2 to v4
View Migrating.md

First couple things I thought about when migrating after reading the docs

So migrating my existing app wasn't as troublesome as I originally thought. First thing I did was take a look at my router and routes and figure try to make a mental model of all the files where I had nested routes in the existing app because those components/containers will contain {this.props.children}. So I need to replace those with the nested <Match /> components.

So just to give an example:

In v2:

<Router history={history}>
 
@mmrko
mmrko / mocha-react-css-modules.js
Last active Dec 14, 2021
Mocha & React & CSS Modules with Sass
View mocha-react-css-modules.js
// setup.js
import hook from 'css-modules-require-hook'
import sass from 'node-sass'
hook({
extensions: [ '.scss' ],
preprocessCss: data => sass.renderSync({ data }).css
})
@mikaelbr
mikaelbr / destructuring.js
Last active May 26, 2022
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
View destructuring.js
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () => [1, 2, 3];