How to use react-with-styles - 10 common examples

To help you get started, we’ve selected a few react-with-styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github airbnb / react-dates / src / components / SingleDatePicker.jsx View on Github external
} = this.props;
    const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;

    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onOutsideClick : undefined;
    const closeIcon = customCloseIcon || ();

    const inputHeight = getInputHeight(reactDates, small);

    const withAnyPortal = withPortal || withFullScreenPortal;

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    /* eslint-disable jsx-a11y/click-events-have-key-events */
    return (
github airbnb / react-dates / src / components / DateRangePicker.jsx View on Github external
showKeyboardShortcuts={showKeyboardShortcuts}
          onBlur={this.onDayPickerBlur}
          phrases={phrases}
          dayAriaLabelFormat={dayAriaLabelFormat}
          isRTL={isRTL}
          firstDayOfWeek={firstDayOfWeek}
          weekDayFormat={weekDayFormat}
          verticalHeight={verticalHeight}
          transitionDuration={transitionDuration}
          disabled={disabled}
          horizontalMonthPadding={horizontalMonthPadding}
        />

        {withFullScreenPortal && (
          <button aria-label="{phrases.closeDatePicker}" type="button">
            {closeIcon}
          </button>
        )}
      
    );
    /* eslint-enable jsx-a11y/no-static-element-interactions */
    /* eslint-enable jsx-a11y/click-events-have-key-events */
  }
github airbnb / react-dates / src / components / DateRangePicker.jsx View on Github external
);

    const closeIcon = customCloseIcon || (
      
    );

    const inputHeight = getInputHeight(reactDates, small);

    const withAnyPortal = withPortal || withFullScreenPortal;

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    /* eslint-disable jsx-a11y/click-events-have-key-events */
    return (
github airbnb / react-dates / src / components / KeyboardShortcutRow.jsx View on Github external
function KeyboardShortcutRow({
  unicode,
  label,
  action,
  block,
  styles,
}) {
  return (
    <li>
      <div>
        <span action="" aria-label="{`${label},`}" role="img">
          {unicode}</span></div></li>
github airbnb / react-dates / test / _helpers / registerReactWithStylesInterface.js View on Github external
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { StyleSheetTestUtils } from 'aphrodite';

import DefaultTheme from '../../src/theme/DefaultTheme';

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});
github airbnb / rheostat / test / _helpers / setupFilesAfterEnv.js View on Github external
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from '../../src/themes/DefaultTheme';

const { WITH_DOM } = process.env;

const MockInterface = {
  create: () => ({}),
  resolve: () => ({}),
  flush: () => {},
};

const stylesInterface = WITH_DOM ? AphroditeInterface : MockInterface;

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(stylesInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => new Promise((resolve) => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
  return process.nextTick(resolve);
}));
github airbnb / rheostat / test / _helpers / setupFilesAfterEnv.js View on Github external
import { StyleSheetTestUtils } from 'aphrodite';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from '../../src/themes/DefaultTheme';

const { WITH_DOM } = process.env;

const MockInterface = {
  create: () => ({}),
  resolve: () => ({}),
  flush: () => {},
};

const stylesInterface = WITH_DOM ? AphroditeInterface : MockInterface;

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(stylesInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => new Promise((resolve) => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
  return process.nextTick(resolve);
}));
github airbnb / react-dates / test / _helpers / registerReactWithStylesInterface.js View on Github external
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { StyleSheetTestUtils } from 'aphrodite';

import DefaultTheme from '../../src/theme/DefaultTheme';

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});
github airbnb / react-dates / src / components / DayPickerKeyboardShortcuts.jsx View on Github external
type="button"
          aria-label={toggleButtonText}
          onClick={this.onShowKeyboardShortcutsButtonClick}
          onKeyDown={(e) =&gt; {
            if (e.key === 'Enter') {
              e.preventDefault();
            } else if (e.key === 'Space') {
              this.onShowKeyboardShortcutsButtonClick(e);
            }
          }}
          onMouseUp={(e) =&gt; {
            e.currentTarget.blur();
          }}
        &gt;
          <span>
            ?
          </span>
        

        {showKeyboardShortcutsPanel &amp;&amp;
github airbnb / react-dates / src / components / DropDownController.jsx View on Github external
const inputEl = Input &amp;&amp; (
      <input>
    );

    return (
      <div>
        {enableOutsideClick &amp;&amp; (
          
            {inputEl}
            {this.maybeRenderDayPickerWithPortal()}
          
        )}
        {!enableOutsideClick &amp;&amp; inputEl}
        {!enableOutsideClick &amp;&amp; this.maybeRenderDayPickerWithPortal()}
      </div>
    );
  }
}

react-with-styles

[![Build Status][travis-svg]][travis-url] [![dependency status][deps-svg]][deps-url] [![dev dependency status][dev-deps-svg]][dev-deps-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]

MIT
Latest version published 4 years ago

Package Health Score

59 / 100
Full package analysis