react-create-styled-component

Util to create styled components with CSS-in-JS

styledComponent

Creates a styled React component

Since v0.0.1

Param	Type
styles Javascript style object that gets applied to component	object
element Type of dom element that component uses	string | JSX.Element
config (optional) Object shaped like {classNames = [], combinators = {}}. 'classNames' are additional classes that get assigned to the component. 'combinators' are additional styles that get applied as a separate class to the component.	object

Returns: {component}

Supporting Types

// 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

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

Examples

// 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>
  </>

Package Contents

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