Skip to content

Instantly share code, notes, and snippets.

@eldh
eldh / useMousePosition.ts
Created September 15, 2020 17:01
useMousePosition
import * as React from "react";
import { throttle } from "lodash";
/**
* Mouse position as a tuple of [x, y]
*/
type MousePosition = [number, number];
/**
* Hook to get the current mouse position
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
import React from 'react'
export function makeLoadable({ loading, render, loader }) {
const Comp = render
? React.lazy(() =>
loader().then(loaded => ({
...loaded,
default: props => render(loaded, props),
}))
)
@eldh
eldh / Lab.re
Last active April 7, 2019 12:22
LAB <-> RGB in Reason
exception InvalidValue(string);
let toInt = f => (f +. 0.5)->int_of_float;
module Constants = {
let kn = 18;
let xn = 0.950470;
let yn = 1.;
let zn = 1.088830;
let t0 = 0.137931034; // 4 / 29
@eldh
eldh / Hooks.re
Last active April 1, 2019 15:54
ReasonReact useReducer hook
type update('state, 'action) =
| NoUpdate
| Update('state)
| SideEffects(self('state, 'action) => unit)
| UpdateWithSideEffects('state, self('state, 'action) => unit)
and self('state, 'action) = {
state: 'state,
send: 'action => unit,
};
@eldh
eldh / events.re
Created August 20, 2017 09:41
Electron ipc with reason
type date = {day: int};
type eventName =
| SetDate
| SetText;
let setDate send (u: date) => send SetDate u;
let handleSetDate on (handler: _ => date => unit) => on SetDate handler;
@eldh
eldh / DelayRender.js
Last active September 14, 2016 15:59
class DelayRender extends React.Component {
constructor({onPropsChange, ...props}) {
super(...arguments)
this.state = {props}
}
componentWillReceiveProps(props) {
this.setState({isWaiting: true})
this.props.onPropsChange(() => {this.setState({props, isWaiting: false})})
TEST_CONFIG = NODE_ENV=test BABEL_ENV=test
test-unit:
$(TEST_CONFIG) mocha app/**/*_spec.*
@eldh
eldh / LazyRender.coffee
Last active August 29, 2015 14:23
Lazy render react component
module.exports = React.createClass
displayName: 'LazyRender'
getInitialState: -> props: @props
componentWillReceiveProps: (newProps) -> setTimeout (=> @setState newProps), 10
shouldComponentUpdate: (newProps, newState) -> @state isnt newState
@eldh
eldh / grid.coffee
Created April 24, 2015 12:16
Grid overlay
Style = require '../styles/generated/props'
module.exports = React.createClass
displayName: 'grid'
propTypes:
className: React.PropTypes.string
getInitialState: ->