Skip to content

Instantly share code, notes, and snippets.

@necolas
necolas / App.js
Last active July 10, 2019 11:16 — forked from trueadm/flare-ideas.jsx
React event responders
// 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
necolas / createOrderedCSSStyleSheet.js
Last active January 26, 2019 13:42
OrderedCSSStyleSheet: control the insertion order of CSS
/**
* 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 September 23, 2020 09:16
React Pressable / OnLayout
/**
* 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 September 19, 2018 23:02
Next.js links with React Native for Web
@necolas
necolas / AppText.js
Last active April 17, 2022 19:13
Localized typography with React Native
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 January 1, 2024 17:32
Hover styles in React Native for Web
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} />}
/**
* 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';
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 September 15, 2015 09:12
React Web Style-API
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 November 4, 2015 00:05
CSS-in-JS to CSS
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>