Skip to content

Instantly share code, notes, and snippets.

@casprine
casprine / useTrackUpdate.js
Last active August 2, 2023 13:21
React hook to trace why a component re-render because of prop changes
import { useRef, useEffect } from 'react';
function useTraceUpdate(props: any) {
const prev = useRef(props);
useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v];
}
return ps;
import React, { ComponentProps, FunctionComponent, memo, useMemo } from 'react'
import { View } from 'react-native'
import styled, { css } from 'styled-components/native'
import { ThemeColorName } from '../../../types'
import { invariant, normalize, useOnPress } from '../../../util'
import {
Avatar,
Button,
@casprine
casprine / DoubleTap.js
Created March 9, 2020 21:27
DoubleTap component for React Native
import React from "react";
import { TouchableOpacity } from "react-native"
const DoubleTap = ({ children, delay, doubleTap, singleTap, ...rest }) => {
let timer = false;
let firstPress = true;
let delayTime = delay;
let lastTime = new Date();
@casprine
casprine / grid
Last active February 1, 2019 23:36
A dead simple grid system
// grid system
.grid-base,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
display: -webkit-box;
display: -webkit-flex;
@casprine
casprine / gulp-css
Created June 3, 2018 08:49
Concatenate,auto-prefix and minify css files using gulp
let
gulp = require('gulp'),
concat = require('gulp-concat-css'),
minify = require('gulp-clean-css'),
prefix = require('gulp-autoprefixer');
let path = {
src: './*.css',
dest: './done/'
}
@casprine
casprine / px to em(sass)
Created May 31, 2018 17:35
Sass mixins to convert px to em
$base: 15;
@function em($pixels, $context: $base) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}