How to use the theming.ThemeContext.Consumer function in theming

To help you get started, we’ve selected a few theming 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 cssinjs / jss / packages / react-jss / src / withStyles.js View on Github external
const withStyles = (styles: Styles, options?: HOCOptions = {}) => {
  const {index = getSheetIndex(), theming, injectTheme, ...sheetOptions} = options
  const isThemingEnabled = typeof styles === 'function'
  const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer

  return (
    InnerComponent: ComponentType = NoRenderer
  ): ComponentType => {
    const displayName = getDisplayName(InnerComponent)

    const getTheme = (props): Theme => (isThemingEnabled ? props.theme : ((noTheme: any): Theme))

    class WithStyles extends Component, State> {
      static displayName = `WithStyles(${displayName})`

      // $FlowFixMe
      static defaultProps = {...InnerComponent.defaultProps}

      static createState(props) {
        const sheet = createStyleSheet({
github cssinjs / jss / packages / react-jss / src / createHoc.js View on Github external
// $FlowFixMe: Flow complains for no reason...
      const {innerRef, theme, ...props} = this.props
      const sheet = dynamicSheet || staticSheet

      if (injectMap.sheet && !props.sheet && sheet) props.sheet = sheet
      if (injectMap.theme) props.theme = theme

      // We have merged classes already.
      if (injectMap.classes) props.classes = classes

      return 
    }
  }

  if (isThemingEnabled || injectMap.theme) {
    const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer

    // eslint-disable-next-line no-inner-declarations
    function ContextSubscribers(props) {
      return {theme => }
    }

    ContextSubscribers.InnerComponent = InnerComponent

    return ContextSubscribers
  }

  return Jss
}
github lttb / reshadow / packages / styled / index.js View on Github external
import React from 'react';
import {getDisplayName} from '@reshadow/react';
import {
    keyframes,
    createStyled as createReshadowStyled,
    wrap,
    createCSS,
} from '@reshadow/runtime';
import coreStyled, {KEYS, map} from '@reshadow/core';
import tags from '@reshadow/utils/html-tags';
import {ThemeContext} from 'theming';
import isReactProp from 'is-react-prop';

const ThemeConsumer = ThemeContext.Consumer;

const styledProps = ['as', 'theme'];
const blacklist = new Set([...styledProps, 'color']);

const filterProps = props => {
    const nextProps = {};
    const filtered = Object.create(styledProps);
    Object.keys(props).forEach(prop => {
        nextProps[prop] = props[prop];
        if (blacklist.has(prop) || !isReactProp(prop)) {
            filtered.push(prop);
        }
    });
    return {props: nextProps, filtered};
};