Skip to content

A small utility function to make react components that use css modules to have extensible styles.

Notifications You must be signed in to change notification settings

AriaMinaei/compose-classes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A small utility function to make react components that use css modules to have extensible styles.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published