How to use react-css-themr - 10 common examples

position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
  // eslint-disable-next-line react/no-unused-prop-types
  open: PropTypes.bool,
  onClose: PropTypes.func,
};

Drawer.defaultProps = {
  theme: defaultTheme,
  className: '',
  position: 'left',
  children: null,
  open: false,
  onClose: () => {},
};

export default themr('CBDrawer', defaultTheme)(Drawer);

additionalClass: PropTypes.string,
  theme: PropTypes.object, // eslint-disable-line
  inverted: PropTypes.bool,
};

Checkbox.defaultProps = {
  label: null, // Should send a name if they need the callback value
  onClick: () => {},
  checked: false,
  additionalClass: '',
  theme: defaultTheme,
  value: '',
  inverted: false,
};

export default themr('CBCheckbox', defaultTheme)(Checkbox);

onChange: PropTypes.func,
  range: PropTypes.bool,
};

Slider.defaultProps = {
  min: 0,
  max: 100,
  theme: defaultTheme,
  disabled: false,
  range: false,
  onChange: (min, max) => {
    console.log({ min, max });
  },
};

export default themr('CBSlider', defaultTheme)(Slider);

tooltipText: PropTypes.string.isRequired,
  top: PropTypes.bool,

};

Tooltip.defaultProps = {
  children: null,
  className: '',
  theme: defaultTheme,
  image: null,
  alt: '',
  title: '',
  top: undefined,
};

export default themr('CBTooltip', defaultTheme)(Tooltip);

Table.propTypes = {
  theme: PropTypes.oneOfType([PropTypes.object]),
  columns: PropTypes.oneOfType([PropTypes.array]).isRequired,
  data: PropTypes.oneOfType([PropTypes.array]).isRequired,
  sort: PropTypes.bool,
  sortByTitle: PropTypes.bool,
};

Table.defaultProps = {
  theme: defaultTheme,
  sort: false,
  sortByTitle: false,
};

export default themr('CBTable', defaultTheme)(Table);

info: PropTypes.bool,
  infoText: PropTypes.string,
  theme: PropTypes.object,
  hasSearch: PropTypes.bool,
  loading: PropTypes.bool,
  disabled: PropTypes.bool,
  blueBorder: PropTypes.bool,
  selectorRef: PropTypes.func,
  colorDot: PropTypes.string,
  required: PropTypes.bool,
  optional: PropTypes.bool,
  value: PropTypes.object,
  disclaimer: PropTypes.string
};

export default themr('Dropdown', styles)(Dropdown);

infoText: PropTypes.string,
  label: PropTypes.string,
  selectedLabel: PropTypes.string,
  children: PropTypes.node,
  loading: PropTypes.bool,
  hideSelected: PropTypes.bool,
  mirrorX: PropTypes.bool,
  icon: PropTypes.object
};

Multiselect.defaultProps = {
  selectedClassName: styles.selected,
  loading: false
};

export default themr('MultiSelect', styles)(Multiselect);

>
      {failMessage}
    
    {React.Children.map(children, Child => cloneElement(Child, { failed }))}
  
);

Fieldset.propTypes = {
  children: PropTypes.object.isRequired,
  theme: PropTypes.object,
  failed: PropTypes.bool,
  failMessage: PropTypes.string,
  className: PropTypes.string
};

export default themr('Fieldset', styles)(Fieldset);

{children}
      
    );
  }
}

ModalHeader.propTypes = {
  title: PropTypes.string,
  tabTitles: PropTypes.array,
  selectedIndex: PropTypes.number,
  handleTabIndexChange: PropTypes.func,
  children: PropTypes.node,
  theme: PropTypes.object
};

export default themr('ModalHeader', styles)(ModalHeader);

))}
  
);

Tooltip.propTypes = {
  label: PropTypes.any,
  tooltip: PropTypes.object,
  payload: PropTypes.array,
  sort: PropTypes.bool.isRequired
};

Tooltip.defaultProps = {
  sort: false
};

export default themr('Tooltip', theme)(Tooltip);