Skip to content

v2.5.0

Choose a tag to compare

@ItsJonQ ItsJonQ released this 13 May 16:14
· 5 commits to master since this release

createStyled: Export and add extraArguments feature

This update exports the createStyled factory function, which is used
to create the primary styled() styled component function.

createStyled was enhanced with a special argument called extraArguments.
This allows for a creation of styled() with unique + convenient built-in
props. By default, only theme is provided to the styled component.

Example

import { createStyled } from '@helpscout/fancy'

const extraArguments = {
  $branding: {
    main: '#00ff55'
  }
}
const styled = createStyled({ extraArguments })

From this point on, any component created with styled will have access to $branding.

const Block = styled('div')`
  $({ $branding }) => `
    color: ${$branding.main};
  `
`

Anything can be passed as extraArguments. Other handing things can include functions like rgba or font utils.

Inspiration:

https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument

And

https://baseweb.design/getting-started/installation/#styletron


  • createStyled: Export and add extraArguments feature (#46) b2e290a

v2.4.1...v2.5.0