Skip to content

Instantly share code, notes, and snippets.

View MoOx's full-sized avatar
:shipit:
Freelance React / React Native Expert, Cross-platform fanboy (native, web...)

Max Thirouin MoOx

:shipit:
Freelance React / React Native Expert, Cross-platform fanboy (native, web...)
1.2k followers · 19 following
View GitHub Profile
@MoOx
MoOx / index.web.js
Last active January 7, 2019 16:36
react-native-web partial Picker implementation (using react-native-web@0.0.44) https://github.com/necolas/react-native-web/issues/195
// @flow
// partial dirty implementation of react-native Picker
// should match http://facebook.github.io/react-native/docs/picker.html
// https://github.com/necolas/react-native-web/issues/184
import createDOMElement from "react-native-web/dist/modules/createDOMElement"
import PickerItem from "./item.web.js"
@MoOx
MoOx / cancelable-promise.js
Created August 5, 2016 11:05
Way to have cancelable promise
// @flow
// https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
export type CancelablePromise = {
promise: Promise<any>,
cancel: Function,
}
export const makeCancelablePromise = (
@MoOx
MoOx / package.json.js
Last active June 26, 2022 22:18
Boost your Webpack performance with DLLPlugin (will bundle as dll all your "dependencies", see comment in package.json)
{
"private": true,
// ...
"#dependencies": "dependencies are the one shipped to the client",
"dependencies": {
"babel-polyfill": "^6.7.4",
"react": "^15.0.0",
// ...
"whatwg-fetch": "^0.11.1"
},
@MoOx
MoOx / install-flow-windows.md
Last active November 22, 2022 08:59
Unofficial Flow Windows binary
@MoOx
MoOx / .flowconfig
Last active July 12, 2018 01:44
flow config webpack adjustements to avoid the "Required module not found" for png, css, svg etcc
# ...
[options]
# webpack loaders
module.name_mapper='.*\.css$' -> '<PROJECT_ROOT>/flow/stub/css-modules.js'
module.name_mapper='.*\.\(svg\|png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/stub/url-loader.js'
@MoOx
MoOx / Stateful.js
Created May 4, 2016 12:56
Stateful functional component (with specific states)
// @flow
import React, { Component } from "react"
type Props = Object
type State = {
hovered: boolean,
focused: boolean,
depressed: boolean,
@MoOx
MoOx / autoscroll.js
Last active June 21, 2019 01:40
Auto scroll to proper active (form) element when keyboard open (may be useless on iOS, but useful on Android)
// auto scroll to proper active (form) element when keyboard open
// may be useless on iOS, but useful on Android
function scrollToActiveElement() {
if (document.activeElement && document.activeElement.scrollIntoViewIfNeeded) {
document.activeElement.scrollIntoViewIfNeeded()
}
}
window.addEventListener("resize", () => {
setTimeout(scrollToActiveElement, 200)
setTimeout(scrollToActiveElement, 1000) // just in case browser is slow
@MoOx
MoOx / webpack.config.babel.js
Last active March 28, 2016 06:20
Simpler webpack config concept
import webpackSimpleConfig from "webpack-simple-config"
/*
ideas:
- simpler config
- fix loaders order (imo, more logical order): proof is that every new webpack user don't get this part
- no tons of way to provide config via string, query etc
- some shortcuts: simple extract, aliases
*/
@MoOx
MoOx / example.js
Created January 10, 2016 20:51
Example of conditional conf with spread
const DEV = process.argv.includes("--dev")
const PROD = process.argv.includes("--production")
export default {
common: "stuff",
...DEV && {
just: "for dev"
},
...PROD && {
just: "for prod",
@MoOx
MoOx / isDblTouchTap.js
Last active April 30, 2023 19:28
Double touch tap workaround for React based on onTouchTap (react-tap-event-plugin)
const dblTouchTapMaxDelay = 300
let latestTouchTap = {
time: 0,
target: null,
}
export default function isDblTouchTap(event) {
const touchTap = {
time: new Date().getTime(),
target: event.currentTarget,