A collection of components to share common functionality across teams.
npm install @eurosport/web-toolkit emotion@9 react-emotion@9 emotion-theming@9 polished@2
All available components are exported as named exports so you can pull them in easily:
import { ThemeProvider } from 'emotion-theming'; import { injectStyles, theme, Button } from '@eurosport/web-toolkit'; injectStyles(); const MyApp = () => ( <ThemeProvider theme={theme}> <Button>Hello!</Button> </ThemeProvider> );
The Link component use a default prop "linkComponent" which is a function returning an anchor tag. If you want to override this behaviour, you can specify a custom function in your app as below :
import { RouterLink } from 'react-router-dom'; import { Link } from '@eurosport/web-toolkit'; Link.defaultProps.linkComponent = ({ href, children, ...props }) => ( <RouterLink {...props} to={href}> {children} </RouterLink> );
If a component defines a prop "linkComponent", then you can override the link behaviour for one instance of this component, by passing a custom function to this prop.
import { RouterLink } from 'react-router-dom'; import { Card } from '@eurosport/web-toolkit'; const overridenLink = ({ href, children, ...props }) => ( <RouterLink {...props} to={href}> {children} </RouterLink> ); const cardData = {}; <Card.Content card={cardData} type="article" linkComponent={overridenLink} />;
"emotion": "9",
"emotion-theming": "9",
"polished": "2",
"prop-types": "15",
"react": "16",
"react-emotion": "9"