Skip to content

Instantly share code, notes, and snippets.

View dantman's full-sized avatar

Daniel Friesen dantman

124 followers · 3 following
View GitHub Profile
@dantman
dantman / wsl-git-credential-manager.sh
Created January 20, 2021 05:19
WSL Bash script that makes the Linux `git` use the same Windows based credential manager as the host system's git.exe
echo "Setup WSL's Git to use the same credential manager that the Windows git.exe is using"
GIT_CREDENTIAL_MANAGER_CORE_EXE=$(wslpath "$(git.exe config --global --get credential.helper | sed 's/\\\(\s\)/\1/g')" | sed 's/\(\s\)/\\\1/g')
git config --global credential.helper "$GIT_CREDENTIAL_MANAGER_CORE_EXE"
@dantman
dantman / context.js
Created March 22, 2019 02:21
React context slice idea
MyContext.slice(value => value.foo);
const KeyContext = useMemo(() => MyContext.slice(value => value[key]), [key])
const keyValue = useContext(KeyContext);
const KeyContext = useMemo(() => MyContext.slice(value => value[key]), [key])
return <KeyContext.Consumer>{keyValue => keyValue}</KeyContext.Consumer>
@dantman
dantman / useId.js
Created January 23, 2019 06:54
A simple hook that returns a unique ID (locally unique and good for dynamic id attributes; not SSR safe)
import warning from 'warning';
import { useState } from 'react';
let idCounter = 0;
function nextId() {
idCounter += 1;
warning(
idCounter < 1e10,
'Id: you might have a memory leak.' +
'The idCounter is not supposed to grow that much.'
@dantman
dantman / Id.js
Created January 23, 2019 06:40
Render prop component that returns a unique id
import warning from 'warning';
import { Component } from 'react';
let idCounter = 0;
function nextId() {
idCounter += 1;
warning(
idCounter < 1e10,
'Id: you might have a memory leak.' +
'The idCounter is not supposed to grow that much.'
@dantman
dantman / .babelrc
Last active August 28, 2018 00:03
Demonstration of the "Duplicate declaration" error in Babel.
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": 8
}
}
]
@dantman
dantman / .babelrc
Last active October 22, 2022 14:13
babel-jest Babel 7 node_modules import issue
{
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
]
]
}
@dantman
dantman / example.js
Created April 16, 2018 19:51
Function decorator
@memoize
export default function myExpensiveFunction(data) {
// do something expensive
return result;
}
@dantman
dantman / AnchorRef.js
Created April 7, 2018 22:07
A very simple AnchorRef component that uses a render-prop to provide a local ref (for popover anchors, etc...)
import {PureComponent} from 'react';
export default class AnchorRef extends PureComponent {
state = {
ref: undefined,
};
_setRef = ref => {
this.setState({ref});
};
@dantman
dantman / fragment-component-to-jsx-fragment.js
Created April 4, 2018 04:09
jscodeshift codemod to change <React.Fragment> and <Fragment> to <>
module.exports = function (file, api, options) {
const j = api.jscodeshift; // alias the jscodeshift API
const root = j(file.source); // parse JS code into an AST
let mutation = false;
const isJSXIdentifier = (node, name) => j.JSXIdentifier.check(node) && node.name === name;
// Remove the opening and closing element names if they are Fragment or React.Fragment
const update = node => {
@dantman
dantman / index.html
Created April 1, 2018 13:53
material-ui/src/List/ListItem.js styles annotated with React Native relevance
<span class=""><span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >export</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >const</span> <span class="pl-c1" style="box-sizing:border-box;color:#005cc5;" >styles</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=</span> <span class="pl-smi" style="box-sizing:border-box;color:#24292e;" >theme</span> <span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >=&gt;</span> ({</span><br>
<span class="">&nbsp; root<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> {</span><br>
<span class="yes" style="background-color:#81A594;" >&nbsp; &nbsp; display<span class="pl-k" style="box-sizing:border-box;color:#d73a49;" >:</span> <span class="pl-s" style="box-sizing:border-box;color:#032f62;" ><span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span>flex<span class="pl-pds" style="box-sizing:border-box;color:#032f62;" >'</span></span>,</span><br>
<span class="yes" style