Skip to content

Instantly share code, notes, and snippets.

Nicolas Gallagher necolas

Block or report user

Report or block necolas

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
necolas / App.js
Last active Jul 10, 2019 — forked from trueadm/flare-ideas.jsx
React event responders
View App.js
// We can listen for events (e.g., 'press. or 'focuswithin') that are fired from responders,
// if they are allowed to bubble.
// context.dispatchEvent(eventObject, listener, eventPriority, bubbles)
// This allows us to prevent certain events from bubbling up the tree, e.g., 'focus', 'scroll'.
import React, {useRef, useState} from 'react';
import {Pressable, Text, View} from 'react-ui';
import {PressListener} from 'react-events/press';
necolas / createOrderedCSSStyleSheet.js
Last active Jan 26, 2019
OrderedCSSStyleSheet: control the insertion order of CSS
View createOrderedCSSStyleSheet.js
* Copyright (c) Nicolas Gallagher.
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
* @flow strict-local
type Groups = { [key: number]: Array<string> };
necolas / using-OnLayout.js
Last active Mar 14, 2019
React Pressable / OnLayout
View using-OnLayout.js
* OnLayout is built upon: View (and ResizeObserver), StyleSheet
const elementBreakpoints = {
small: { minWidth: 200 },
medium: { minWidth: 300 }
large: { minWidth: 500 }
necolas / Composite-Link.js
Created Sep 19, 2018
Next.js links with React Native for Web
View Composite-Link.js
necolas / AppText.js
Last active Jan 12, 2020
Localized typography with React Native
View AppText.js
import i18n from './i18n';
import theme from './theme';
import { bool, string } from 'prop-types';
import { I18nManager, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';
* React Component
class AppText extends Component {
necolas / Hoverable.js
Last active Dec 13, 2019
Hover styles in React Native for Web
View Hoverable.js
import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';
const hover = createHoverMonitor();
* Use:
* <Hoverable>
* {(hover) => <View style={hover && styles.hovered} />}
View react-native-shim.js
* This module is aliased to 'react-native' in our webpack config.
* RNW currently uses inline styles. Our existing CSS – written using `css-modules`
* and processed by `post-css` – needs to override RNW's default component styles
* when RNW is being used to render the app. A postcss transform was added to our
* webpack config to append `!important` to (almost) every CSS declaration.
import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';
View button.js
import styles from './styles.css';
import testIDs from './testIDs';
export render = (text) => (
<button className={styles.button} data-test-id={testsIDs.button}>
<span className={styles.icon}></span>
necolas / CustomView.jsx
Last active Sep 15, 2015
React Web Style-API
View CustomView.jsx
import ReactWebStyle, {WebComponent} from 'react-web-style';
import React, {PropTypes} from 'react';
import {Text, View} from 'react-web-sdk';
const styles = {
root: {
borderColor: 'red',
padding: '10px',
position: 'absolute',
necolas / Button.jsx
Last active Nov 4, 2015
CSS-in-JS to CSS
View Button.jsx
import React from 'react';
import styles from './styles.css.js';
class Button extends React.Component{
render() {
return (
<button className={styles.button}>
<span className={styles.icon} />
You can’t perform that action at this time.