moroshko/react-autosuggest

Issue with pseudo classes when theme styling using Radium

Open

#178 opened on May 31, 2016

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (5,936 stars) (637 forks)batch import
help wanted

Description

So I've dug into your other component (react-autowhatever) and react-themable a bit. I'm using Radium internally on my application and defining my autosuggest theme using inline styles was fine. The problem comes when we get into psuedo classes. Radium implements them by defining keys on your style object that look like:

const inputStyle = {
  height: 50,
  borderColor: 'red',
  ':hover': {
    borderColor: 'blue'
  }
}

Radium implements these by using a high order component wrapping your component that the element in question belongs to. In the react-autosuggest paradigm this is the react-autowhatever component. However, because that is an internal piece of the autosuggest, there is no way to add a Radium decorator to the autowhatever.

I think this component abstraction is the only issue I see with usage of react-themable.

I can't think of a good paradigm to implement this, other than allowing the autosuggest to take a prop that allows you to pass a HOC wrapper for the autowhatever. The ideal way to work with Autosuggest + Radium would be like this:

import Autosuggest from 'react-autosuggest';

const Radium = require('Radium');
const WrappedAutoSuggest = Radium(Autosuggest);

class MyComponent extends React.Component { 
  render() {
    return (
      <WrappedAutosuggest {...props} />
    );
  }
}

Just wanted to add this information to the project, I really like the component. I think I'm just going to use CSS on input part of the theme as work around for now. Cheers.

Contributor guide