Skip to content

Instantly share code, notes, and snippets.

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";
/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
const [mouseX, mouseY] = useMousePosition();
const positions = { x, y, h, w, mouseX, mouseY };
return (
<div
@tkafka
tkafka / LICENSE.txt
Last active May 17, 2024 02:08
Drop-in replacement for ReactCSSTransitionGroup that uses velocity.js instead of CSS transforms. Add your own transitions to `transitions` hash.
The MIT License (MIT)
Copyright (c) 2014 Tomas Kafka
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
@spoike
spoike / framerateThrottle.js
Last active August 13, 2017 21:35
Throttling using windows.requestAnimationFrame with fallback to lodash throttle. See more here: http://spoike.ghost.io/user-input-framerate-throttling-in-the-browser/
(function() {
var defaultFrameRate = 20, // fps lock for old browsers
// This is the default fallback throttle function
framerateThrottle = function(callback) {
return _.throttle(callback, 1 / (defaultFrameRate * 1000));
};
// Feature detection - should have requestAnimationFrame
if (window.requestAnimationFrame) {
framerateThrottle = function(callback) {
@mikaelbr
mikaelbr / destructuring.js
Last active April 25, 2024 13:21
Complete collection of JavaScript destructuring. Runnable demos and slides about the same topic: http://git.mikaelb.net/presentations/bartjs/destructuring
// === Arrays
var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2
// Use from functions, only select from pattern
var foo = () => [1, 2, 3];
@manikrathee
manikrathee / Intro
Last active May 17, 2020 13:22
Common UI pattern problem with a simple solution: Space elements without having an extra set of padding at the bottom of a container.
- Div has 10px padding on all sides.
- P or LI's have margin-bottom to space out the next element.
- What you're left with is a giant space at the bottom of the div from the combined properties: padding-bottom: 10px on the Div and margin-bottom: 15px on the last child element. So, instead of using :last-child to try and un-do the styles set on each element, why not set it differently in the first place?
@apla
apla / icons_and_splash.js
Created August 7, 2013 23:15
cordova hook script to copy icons and splash screens to platform directories
#!/usr/bin/env node
var cordova_util = require('cordova/src/util');
var projectRoot = cordova_util.isCordova(process.cwd());
var projectXml = cordova_util.projectConfig(projectRoot);
var projectConfig = new cordova_util.config_parser(projectXml);
projectConfig.name();
var fs = require ('fs');
@scottjehl
scottjehl / hideaddrbar.js
Created August 31, 2011 11:42
Normalized hide address bar for iOS & Android
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){