Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Dhanaraj chrisdhanaraj

View GitHub Profile
@chrisdhanaraj
chrisdhanaraj / useSearch.tsx
Last active Feb 17, 2020
Use Redicer with Side Effects example
View useSearch.tsx
import useReducerWithSideEffects, {
NoUpdate,
Update,
UpdateWithSideEffect,
Reducer,
ReducerReturn
} from 'use-reducer-with-side-effects';
import { useCallback, useEffect, useContext } from 'react';
const initialStateArgs = {
View gist:0a1d02c2d6b4ba28c1275f639065df01
interface Query {
queryString: string,
variables: {
[key]: string;
}
}
function convertToQuery({
query,
queries,
View use-reducer-with-side-effects.d.ts
// Type definitions for use-reducer-with-side-effects 0.4
// Project: https://github.com/baz/foo (Does not have to be to GitHub, but prefer linking to a source code repository rather than to a project website.)
// Definitions by: Chris Dhanaraj <https://github.com/chrisdhanaraj>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
/*~ If this module has methods, declare them as functions like so.
*/
type SideEffectArguments = {
state: any;
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View Sparkles.js
const getRandom = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min
}
export default class ExtraSparkles {
static get inputProperties() {
return ['--extra-sparkleNumber', '--extra-sparkleHue', '--extra-sparkleHeightVariance', '--extra-sparkleWidthVariance', '--extra-sparkleWeightVariance']
}
init() {
@chrisdhanaraj
chrisdhanaraj / oneRequestOnly.js
Created Mar 1, 2019
Showcase how to use refs + hooks to only have a single request at a time
View oneRequestOnly.js
// in some file
const request = useRef();
useEffect(() => {
if (request.current !== undefined) {
request.current.cancel("Cancelled");
}
request.current = axios.CancelToken.source();
View useOutsideClick.js
import { useEffect } from 'react';
export function useOutsideClick(containerRef, triggerRef, cb) {
function isOutsideClick(evt) {
if (
(containerRef.current !== null &&
containerRef.current.contains(evt.target)) ||
(triggerRef !== null && triggerRef.current.contains(evt.target))
) {
return cb({