Skip to content

Instantly share code, notes, and snippets.

Chris Dhanaraj chrisdhanaraj

Block or report user

Report or block chrisdhanaraj

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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({
You can’t perform that action at this time.