JSPM

styled-container-component

3.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 43
  • Score
    100M100P100Q71663F
  • License MIT

The bootstrap container component created with styled-components

Package Exports

  • styled-container-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-container-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

styled-container-component

npm Travis branch Codecov branch storybook lerna

The bootstrap container component made with styled-components

Table of Contents

Why?

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application. To work with ease with any other libary or framework this component is built with styled-components.

Installation

Note: this component has a peer dependency on styled-components > v4. To use this component you also need to npm i styled-components -S.

$ npm i styled-container-component -S

or

$ yarn add styled-container-component

Usage

For detailed information take a look at the documentation.

To use HTML that uses the Boostrap style, use styled-base-components. .

/*
  if you installed `styled-bootstrap-components` use

    import { ... } from 'styled-bootstrap-components'

  instead.
*/
import { Container } from 'styled-container-component';

const MyContainerComponent = (props) => (
  {/* fixed width for small, medium, large and xlarge screen width */}
  <Container>
    {props.children}
  </Container>
);

const MyContainerFluidComponent = (props) => (
  {/* always 100% width */}
  <Container fluid>
    {props.children}
  </Container>
);

Properties

Properties which can be added to the component to change the visual appearance.

  • fluid Type: boolean

License

MIT © Lukas Aichbauer