compose-css-classes
v1.0.2
Published
A small utility function to make react components that use css modules to have extensible styles.
Downloads
1
Readme
Compose css classes
A small utility function to make react components that use css modules to have extensible styles.
Example
/**
* Foo.tsx
**/
import * as css from './Foo.css'
import composeClasses from 'compose-css-classes'
type Props = {
css?: Partial<typeof css>
}
export const Foo = (props: Props) => {
const classes = composeClasses(css, props)
return <div {...classes('container')}></div>
}
/**
* Bar.tsx
**/
import * as css from './Bar.css'
export const Bar = () => {
// a div will be rendered that has both the container class
// from Foo.css and also the fooContaienr class from Bar.css
return <Foo css={{container: css.fooContainer}} />
}
/**
* Foo.css
**/
.container {
background: black;
}
/**
* Bar.css
**/
.fooContainer {
color: white;
}
Look at src/index.test.ts
for more examples.