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
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
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
necolas / Composite-Link.js
Created Sep 19, 2018
Next.js links with React Native for Web
View Composite-Link.js
@necolas
necolas / AppText.js
Last active Sep 18, 2018
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
necolas / Hoverable.js
Last active Apr 16, 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>
{text}
</button>
);
@necolas
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
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} />
Button
</button>
@necolas
necolas / production.css
Last active Aug 29, 2015
"atomic css" as compiled output
View production.css
.abcd {
align-items: center;
}
.efgh {
background: blue;
}
.ijkl {
color: red;
You can’t perform that action at this time.