Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adi518/17f25ae4c88ffffc17825a4671293dc5 to your computer and use it in GitHub Desktop.
Save adi518/17f25ae4c88ffffc17825a4671293dc5 to your computer and use it in GitHub Desktop.
Solution for adding data attributes to a react-select component by passing in "custom components" where you've manipulated the innerProps prop
import React, { Component } from 'react';
import ReactSelect, { components } from 'react-select';
const TextOption = props => (
components.Option && (
<components.Option { ...props }>
...
</components.Option>
)
);
const addDataAcceptance = ( Component, dataAcceptance ) => (
props => (
<Component
{ ...props }
innerProps={ Object.assign({}, props.innerProps, { 'data-acceptance': dataAcceptance }) }
/>
)
);
const CUSTOM_COMPONENTS = {
Option: addDataAcceptance( TextOption, 'TextOption' ),
Menu: addDataAcceptance( components.Menu, 'Menu' ),
...
};
class Select extends Component {
render() {
return (
<ReactSelect
components={ CUSTOM_COMPONENTS }
...
/>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment