react-create-styled-component v0.0.1

react-create-styled-component

Util to create styled components with CSS-in-JS

// The config type for the util:
//   classNames?: Array<string>; - Any additional CSS classNames to append
//   combinators?: Record<string, unknown> - Any combinator CSS-in-JS styles

export type ConfigType = { classNames?: Array<string>, combinators?: Record<string, unknown> };

import { styledComponent } from 'react-create-styled-component';

// basic
const MyComponent = styledComponent({ padding: 4 }, 'div');

  //=> In your render:
  <MyComponent>This is a div with padding</MyComponent>


// combinators
const combinators = {
  '& + &': {
    marginLeft: 16,
  }
}
const MyButton = styledComponent({ color: 'green' }, 'button', { combinators });

  //=> In your render:
  <>
    <MyButton>This is a green button</MyButton>
    <MyButton>This is another green button with margin-left</MyButton>
  </>

Within the module you'll find the following directories and files:

package.json
CHANGELOG.md -- history of changes to the module
README.md -- this file
/lib
  └───/es5
      └───index.d.ts - 111 Bytes
      └───index.js - 307 Bytes
    └───/styledComponent
      └───index.d.ts - 1.59 KB
      └───index.js - 3.87 KB
      └───types.d.ts - 306 Bytes
      └───types.js - 79 Bytes
  └───/es6
      └───index.d.ts - 111 Bytes
      └───index.js - 54 Bytes
    └───/styledComponent
      └───index.d.ts - 1.59 KB
      └───index.js - 3.69 KB
      └───types.d.ts - 306 Bytes
      └───types.js - 12 Bytes