How to use react-fela - 10 common examples

);

const StyledCardContent = createComponent(() => ({
  padding: '8px',
  marginLeft: '60px',
}));

const StyledCardTitle = createComponent(
  () => ({
    width: '200px',
    ellipsis: true,
  }),
  'h6'
);

const StyledCardParagraph = createComponent(
  () => ({
    margin: 0,
    ellipsis: true,
    width: '200px',
    // whiteSpace: 'nowrap',
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
    lineHeight: '18px',
    maxHeight: '54px',
    fontSize: 'small',
  }),
  'p'
);

export default ({ name, description, image, ...rest }) =>

flexShrink: props.shrink || 0,
  flexBasis: props.basis || 'auto',
  flex: props.flex === true ? 1 : props.flex,
  justifyContent: props.justifyContent || props.center && 'center',
  alignItems: props.alignItems || props.center && 'center',
  alignContent: props.alignContent || 'flex-start',
  alignSelf: props.alignSelf || 'stretch',
  order: props.order,

  // shorthands
  display: (props.inline ? 'inline-' : '') + 'flex',
  flexWrap: props.wrap && 'wrap' || props.wrapReverse && 'wrap-reverse' || 'nowrap',
  flexDirection: (props.row ? 'row' : 'column') + (props.reverse ? '-reverse' : '')
})

export default createComponent(Box)

ReactModal2.getApplicationElement = () => document.getElementById('app');

// isOpen={isOpen} transitionSpeed={1000} on={ReactModal}
const ReactModal = ({ className, ...props }) => (
  
);

const getLogo = x => {
  if (typeof x === 'function') {
    return x();
  }
  return <img alt="logo" src="{x}">;
};

export const Modal = withTheme(
  ({
    isOpen,
    showLogo,
    leftButtons,
    rightButtons,
    className,
    subtitle,
    onClose,
    onCancel,
    okText,
    cancelText,
    onOk,
    title,
    loading,
    theme,
    noPortal,

ReactModal2.getApplicationElement = () => document.getElementById('app');

// isOpen={isOpen} transitionSpeed={1000} on={ReactModal}
const ReactModal = ({ className, ...props }) => (
  
);

const getLogo = x => {
  if (typeof x === 'function') {
    return x();
  }
  return <img alt="logo" src="{x}">;
};

const Modal = withTheme(
  ({
    isOpen,
    showLogo,
    leftButtons,
    rightButtons,
    className,
    subtitle,
    onClose,
    onCancel,
    okText,
    cancelText,
    onOk,
    title,
    loading,
    theme,
    noPortal,

describe('components withTheme', () => {
    const DivWithTheme = ({ theme }) =&gt; <div>{theme.color.grass}</div>
    DivWithTheme.propTypes = {
      theme: PropTypes.object,
    }

    const WithThemeDiv = withTheme(DivWithTheme)
    it('should capture snapshot', () =&gt; {
      const { wrapper, snapshot } = felaShallow(, {}, rootTheme)
      expect(snapshot(wrapper)).toMatchSnapshot()
    })
  })

const rule = ({ fontSize, padding }) => ({
  _className: 'foo bar',
  fontSize,
  color: 'red',
  '@media (min-height: 300px)': {
    backgroundColor: 'red',
    lineHeight: 2,
    ':hover': {
      color: 'black',
      paddingLeft: padding,
    },
  },
})

export default createComponent(rule)

const applyTheme = (ComponentToWrap, ...themes) => {
  const ThemedComponent = props => (
    
      
    
  )

  ThemedComponent._isFelaComponent = true
  ThemedComponent.defaultProps = {
    theme: {},
  }
  ThemedComponent.propTypes = {
    theme: PropTypes.object,
  }

  const WithThemeHOC = withTheme(ThemedComponent)
  return WithThemeHOC
}

render() {
      const { skeletorLoading, theme, renderer } = this.context;

      return createComponent(
        p =>
          styles({
            ...p,
            skeletor: skeletorLoading
              ? {
                  background: this.background,
                  overlay: this.overlay,
                  text: this.text,
                  isLoading: true,
                }
              : {
                  background: () => ({}),
                  overlay: () => ({}),
                  text: () => ({}),
                  isLoading: false,
                },

export default (styles, props = p => Object.keys(p), propName) => WrappedComponent => {
  if (!propName && typeof props === 'string') {
    propName = props;
    props = null;
  }
  if (!propName) {
    propName = 'className';
  }
  return createComponent(
    typeof styles === 'function' ? styles : () => styles,
    ({ className, ...rest }) => {
      rest[propName] = className
      return (
        
      )
    },
    props
  );
};

});
}, 'div', function (p) { return Object.keys(p); });
var Title = createComponent(function (_a) {
    var theme = _a.theme, inverse = _a.inverse;
    return ({
        display: 'block',
        fontWeight: 'bold',
        marginBottom: theme.space3,
        padding: theme.space0,
        color: inverse ? theme.light : theme.dark,
    });
}, function (p) {
    return (React.createElement("h4", null,
        React.createElement(Link, __assign({}, p))));
}, function (p) { return Object.keys(p); });
var PaddingLink = createComponent(function (_a) {
    var theme = _a.theme;
    return ({
        padding: theme.space1 + " " + theme.space0,
    });
}, function (p) { return React.createElement(Link, __assign({}, p)); }, function (p) { return Object.keys(p); });
var Item = createComponent(function (_a) {
    var theme = _a.theme;
    return ({
        onHover: {
            '> div': {
                display: 'block',
            },
        },
    });
}, 'div', function (p) { return Object.keys(p); });
var SubMenu = createComponent(function (_a) {