Skip to content

Instantly share code, notes, and snippets.

@casprine
casprine / useTrackUpdate.js
Last active Aug 15, 2020
React hook to trace why a component re-render because of prop changes
View useTrackUpdate.js
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;
@casprine
casprine / DoubleTap.js
Created Mar 9, 2020
DoubleTap component for React Native
View DoubleTap.js
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 Feb 1, 2019
A dead simple grid system
View grid
// 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 Jun 3, 2018
Concatenate,auto-prefix and minify css files using gulp
View gulp-css
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
Sass mixins to convert px to em
View px to em(sass)
$base: 15;
@function em($pixels, $context: $base) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}