aichbauer / styled-bootstrap-components Goto Github PK

The bootstrap components made with styled-components 💅

Home Page: https://aichbauer.github.io/styled-bootstrap-components/

License: MIT License

JavaScript 100.00%

bootstrap css design-system grid javascript layout react react-components styled-bootstrap-components styled-components theme ui

styled-bootstrap-components's Introduction

styled-bootstrap-components

The bootstrap components made with styled-components.

Documentation
Why?
Installation
Usage
Components
Related
License

Why?

I wanted to use bootstrap with React for fast prototypes, or as an entrypoint for my own UI Component Library, or if I needed just one bootstrap component for my application, now I can simply install that specific component. To work with ease with any other library or framework these components are built with styled-components.
I wanted to learn a bit more on how CSS works and on how to build a CSS UI Library from scratch, mostly but not only by reading the bootstrap CSS code and the MDN web docs.
I wanted to learn how to manage and maintain a monorepo with multiple packages based on lerna.

Installation

You can install all bootstrap components with...

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

$ npm i styled-bootstrap-components -S

$ yarn add styled-bootstrap-components

or you can install just the components that you need by following the installation guides in the components section.

Usage

For detailed information (also on how to customize these components) take a look at the documentation.

To see which components are available take a look at the components section.

// whatever components you need
import { Button } from 'styled-bootstrap-components';

export const myComponent = (props) => (
  <Button>Hello, World!</Button>
);

Components

For detailed information take a look at the documentation.

License

MIT © Lukas Aichbauer

styled-bootstrap-components's People

Contributors

Stargazers

Watchers

styled-bootstrap-components's Issues

TypeError: Cannot read property 'colors' of undefined

`
import React, {Component} from 'react';

import { Button } from 'styled-button-component';
import {
Dropdown,
DropdownItem,
DropdownMenu,
} from 'styled-dropdown-component';

const SimpleDropdown = (props) => (
Hello, World!
);

export default SimpleDropdown;
`

resize prop on FormControl

@aichbauer @michaelkrukov
Can you please add resize prop only on FormControl and Type: boolean

Thanks

1 Dropdown Menu should be open at one time

I have 3 drop down menu when I click on all the drop down menu remain open however when I click another one so previous one should b close.

Last toggle option has an issue with close and open

https://codesandbox.io/s/1vp7zvww04

"CAUGHT TypeError: Cannot read property 'colour' of undefined"

I get this error thrown on the latest version that I compiled. Not entirely sure what it means but I've spent a couple of hours trying to get a workaround so that the program can work as I need it to. In the event this isn't a bug would you be able to explain the solution? Thanks!

How would I fully customize theme of (styled-config)

@aichbauer

I want to customize default theme of styled-config which is provided by you, https://github.com/aichbauer/styled-bootstrap-components/blob/master/packages/styled-config/test/fixtures/index.js

codesandbox link:
https://codesandbox.io/s/y3mrmwm1rz

help wanted:
1- how can I customize can you please explain, also I am sharing codesandbox link for your ready reference
2- If I click outside so drop down menu should be closed

how to apply custom css to styled-navbar-component

Hi,
I want to change the background color of the navbar. I write inline style like following:
<Navbar expandLg style={{ backgroundColor: "red" }}>
But this doesn't makes it take the new background-color, and when I open developer tools from Firefox and uncheck the navbar's applied rule, i.e., background-color: #f0f0f0 !important;, my style is applied. Is it possible to give custom backgound-color to the Navbar? Thanks, Merry Christmas and Happy new year :)

Disable Scroll

Having an issue where if the modal is being displayed, I can't disable the scroll

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

I keep getting a warning with the below message, however when I checked the buttons in the code, I couldn't figure out what's causing it.

Error message: Warning: validateDOMNesting(...): cannot appear as a descendant of .

Code example :

  render() {
    return (
      <div className="Track">
        <div className="Track-information">
          <h3>{this.props.track.name}</h3>
          <p>
            {this.props.track.artist}| {this.props.track.album}{' '}
          </p>
        </div>
        <button className="Track-action">{this.renderAction()}</button>
      </div>

boxShadow should be boxShadowColor

I think as this is a wrong name it should be boxShadowColor. because boxShadow property in the theme but not actually working as boxShadow,

Thanks

FormControlInput is not a constructor

Firstly, I think this repo looks awesome, and I was excited to check it out. But unfortunately I ran into problems right away trying to create a form.

Using NextJS, I created the following test component...

import { FormGroup, Label, FormControl } from 'styled-bootstrap-components'

export default props => (
  <>
    <h1>Test Page</h1>
    <form>
      <FormGroup>
        <Label>Email or Username</Label>
        <FormControl placeholder="Email or Username" />
      </FormGroup>
    </form>
  </>
)

But got this error...

FormControlInput is not a constructor

TypeError: FormControlInput is not a constructor
    at FormControl (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/styled-form-component/lib/components/FormControl.js:96:10)
    at processChild (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:2790:14)
    at resolve (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:2714:5)
    at ReactDOMServerRenderer.render (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3098:22)
    at ReactDOMServerRenderer.read (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3057:29)
    at renderToString (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3524:27)
    at renderPage (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/.next/server/static/development/pages/_document.js:164:18)
    at _callee$ (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/next/dist/lib/utils.js:86:30)
    at tryCatch (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)

To test, I verified that the error goes away if I replace FormControl with the following styled input...

const FormControl = styled.input``

Here's the versions I have installed...

    "styled-bootstrap-components": "^2.0.0",
    "styled-components": "^4.1.2",
    "styled-system": "^3.1.11",

Error trying to build packages.

Hello, I'm vetting this package for my place of employment as we've bought in the styled-components and out current integration with Bootstrap is clunky. I'm trying to build the packages locally so that I might toy around in Storybook locally. However I'm getting an error:

lerna ERR! prepublish Errored while running script in 'styled-base-components'
lerna ERR! execute callback with error
lerna ERR! Error: Command failed: yarn run prepublish
lerna ERR! SyntaxError: src/components/transitions.js: Unexpected token (182:6)
lerna ERR! 180 | noInitialEnter,
lerna ERR! 181 | hideOnExit,
lerna ERR! > 182 | ...transitionProps
lerna ERR! | ^
lerna ERR! 183 | } = this.props;
lerna ERR! 184 |
lerna ERR! 185 | const { status } = this.state;
lerna ERR! error Command failed with exit code 1.
lerna ERR! yarn run v1.21.1
lerna ERR! $ babel --root-mode upward src --out-dir lib
lerna ERR! src/components/globalStyle.js -> lib/components/globalStyle.js
lerna ERR! info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR!
lerna ERR! at /Users/bryan/Code/styled-bootstrap-components/node_modules/execa/index.js:236:11

I get this when I run lerna run prepublish (which may be my mistake, but it seemed to be the way to get all the packages to build. Perhaps there is a better way that just isnt documented ?) The above to me appears to be a babel issue as it's choking on the spread operator. It would appear to me you're property configured to deal with the spread operator, so I'm short on guesses here.

<Column> Lacks 'offset' feature

should support offset like:

<Column mdOffset={x} md={x} sm={x} smOffset={x}>

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

I wrapped a component that is by another component. Essentially a StyledButton within a Button.

const StyledButton = styled(Button)

Below is Console log

`overflow`, `work-break` and `position` properies

Column and DropdownDivider components shouldn't have overflow set to hidden by default, Column shouldn't have word-break and its position should be relative

Want to hide alert form modal

Want to hide modal alert onClick kindly see the screen shot also CodeSandbox link

https://codesandbox.io/s/modal-with-alert-7g174

Fix: passing props to modal

Currently in v4.0.0-alpha.0 it is not possible to add additional props to the Modal eg. className, style... this should be possible, to offer the highest flexibility to generate your own library... This is also necessary to use this component with also we should have a way to add a style and className prop to the fade component, and to modal backdrop component, modal content component... and so on... e.g. something like fadeStyle, fadeClassName, modalBackdropStyle, modalBackdropClassName...

styled-bootstrap-components/packages/styled-modal-component/src/components/Modal.js

Line 133 in f69064d

styled-bootstrap-components/packages/styled-modal-component/src/components/Modal.js

Line 134 in f69064d

<ModalWrapper

styled-bootstrap-components/packages/styled-modal-component/src/components/Modal.js

Line 140 in f69064d

<ModalDialog

styled-bootstrap-components/packages/styled-modal-component/src/components/Modal.js

Line 147 in f69064d

<ModalContent theme={this.props.theme}>{children}</ModalContent>

styled-bootstrap-components/packages/styled-modal-component/src/components/Modal.js

Line 151 in f69064d

{!!backdrop && <ModalBackdrop theme={this.props.theme} backdrop={backdrop} />}

Can't Load Components

I have installed styled-components and styled-bootstrap-components.

This is my component:

import { Container, Button, Nav, Navbar, NavbarLink } from "styled-bootstrap-components";

const AllNav = props => (
  <Container fluid>
    <Container fluid>
      <Navbar expandSm light>
        <Nav start>
          <NavbarLink light brand href="#">
            BRAND
          </NavbarLink>
          <Button
            light
            outline
            toggleCollapse
            expandSm
            onClick={() => console.log("close")}
          >
            <span>&#9776;</span>
          </Button>
        </Nav>
        <Nav start collapse expandSm hidden={hidden}>
          <Link light active href="#">
            <a>Active</a>
          </Link>
          <Link light href="#">
            <a>Link</a>
          </Link>
          <Link light href="#">
            <a>Link</a>
          </Link>
          <Link light disabled href="#">
            <a>Disabled</a>
          </Link>
        </Nav>
      </Navbar>
    </Container>
  </Container>
);

export default AllNav;

When accessing the app after building I get:

node_modules/styled-config/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import { theme } from './theme';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/xxx/Code/xxx/frontend/node_modules/styled-alert-component/lib/components/Alert.js:10:21)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
/Users/xxx/Code/xxx/frontend/node_modules/styled-config/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import { theme } from './theme';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/xxx/Code/xxx/frontend/node_modules/styled-alert-component/lib/components/Alert.js:10:21)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
/Users/xxx/Code/xxx/frontend/node_modules/styled-config/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import { theme } from './theme';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/xxx/Code/xxx/frontend/node_modules/styled-alert-component/lib/components/Alert.js:10:21)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
/Users/xxx/Code/xxx/frontend/node_modules/styled-config/lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import { theme } from './theme';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/xxx/Code/xxx/frontend/node_modules/styled-alert-component/lib/components/Alert.js:10:21)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)

Is there another step I am missing?

customize focus styling on FormControl

How to customize focus styling on FormControl fields

How to use 'navbar-nav' and 'pull-right' functionality?

Animation on Dismiss Alert

When click on cross the alert should be hide with animation

Dropdownmenu Right Alignment

@aichbauer

Hi,
Can you please share regarding Dropdownmenu Right Alignment

Just wanted to ask have you merged
#23

Docs: display menu

Since the last release the docs do not have a visible menu for navigation anymore.

TypeError: Cannot read property 'padding' of undefined

Table - valign td

What is the best way to vertical align content within <td> elements?

multiSelect, singleSelect Form fields

@aichbauer @michaelkrukov
can you please add multiSelect, singleSelect, createable multiSelect, createable singleSelect Component in the Form section?

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. #29

I have an error keeps giving me the: Warning: validateDOMNesting(...): cannot appear as a descendant of . #29
even I put each button in a div I still have the same error
This is my code:

// import { render } from "@testing-library/react";
import "./clientsdashboard.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import edit from "../../../assets/assets/Icons/icons8-create-64.png";
import delet from "../../../assets/assets/Icons/icons8-trash-can-64.png";
import add from "../../../assets/assets/Icons/icons8-add-new-64.png";
// import { Link } from "react-router-dom";
import ClientsEditForm from "../../../components/clientsEditForm/clientsEditForm";

const Clientsdashboard = () => {
  const [data, setData] = useState([]);
  const [showEditForm, setShowEditForm] = useState(false);
  const [currentId, setCurrentId] = useState("");

  useEffect(() => {
    axios
      .get("http://localhost:5000/clients/")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const categories = [];
  data.forEach((card) => {
    if (!categories[card.category_name]) {
      categories[card.category_name] = [];
    }
    categories[card.category_name].push({
      client_name: card.client_name,
      client_city: card.client_city,
    });
  });

  const handleDelete = (id) => {
    axios
      .delete(`http://localhost:5000/clients/${id}`)
      .then(() => {
        setData(data.filter((card) => card._id !== id));
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleEdit = (id) => {
    setShowEditForm(true);
    setCurrentId(id);
  };
  const handleCloseClick = () => {
    setShowEditForm(false);
  };

  return (
    <>
      <div className="ccclients_container">
        <div className="cchead_container">
          <h1 className="ccheadline1 ccinside">OUR</h1>
          <h1 className="ccheadline2 ccinside">CLIENTS</h1>
        </div>
        <div className="ccsection ccsection_clients">
          {Object.keys(categories).map((category_name,) => (
            <>
              <div className="cccard">
                <div className="cccategory">
                  <h2 className="cccategory_h">{category_name}</h2>
                </div>
                <div className="ccclients_card">
                  {categories[category_name].map(
                    ({ client_name, client_city, index }, i) => (
                      <ul className="ul" key={data[i]._id}>
                        <li className="li-cc">
                          {client_name}-
                          <span className="span-cc">{client_city}</span>
                        </li>
                        <div>
                        <button
                          id="myBtn"
                          className="btn"
                          onClick={() => handleEdit(data[i]._id)}
                        >
                          {showEditForm && (
                            <ClientsEditForm
                              id={currentId}
                              onClose={handleCloseClick}
                            />
                          )}
                          <img src={edit} alt="" className="edit" />
                        </button>
                        </div>
                        <div>
                        <button
                          className="btn"
                          onClick={() => handleDelete(data[i]._id)}
                        >
                          <img src={delet} alt="" className="edit" />
                        </button>
                        </div>
                      </ul>
                    )
                  )}
                  <img src={add} alt="" className="edit" />
                </div>
                <div></div>
              </div>
            </>
          ))}
        </div>
      </div>
    </>
  );
};

export default Clientsdashboard;

in this code when I click on edit icon a form component pop up

How to pass custom props

Wat to pass custom props for some conditional styling
color: ${props => props.published ? "mediumseagreen" : "#999"};

render() {
const status = this.props.currentStatus;
return (

<StyledButton
status
light
noRadius
onClick={() => this.handleOpenCloseDropdown('published')} />
}

Thanks

V4.0.0

Thanks to the active contributions of @michaelkrukov we will soon be releasing a new version 4.0.0

I would like to see this issue as a discussion board for the next version v4.0.0

As the next version has some breaking changes in it I would like to make a list of what is missing that we can implement before v4.0.0.

So I look forward for you ideas...

ModalDialog max-width

How can I modify ModalDialog max-width: 500px; to max-width: 600px;

Styled-Components v^5.0.0

I'm attempting to use this library with styled-components ^5.0.0. This throws a peer dependency error.

Would it be possible to update the peer dependencies to v5?

Thanks for the package

npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-test-renderer@^16.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of styled-components@^4.1.2 but none is installed. You must install peer dependencies yourself.

<Column> lacks features from bootstrap's .col

Currently styled-grid-system-component is taking sizes from smallest to largest and by default it's 100%. It's behavior is quite different from bootstrap's .col.

I think Columns should take their sizes from largest (starting from size corresponding to current screen size) to smallest. Also, Columns should try to distribute available space evenly if no sizes specified.

Contaner not getting centered

I'm using container Component from styled-bootstrap-components. It's make my div full width. What's the problem?

Fix: make usable with styled-components v4.x.x

Right now some components are unusable with styled-components v4

TypeError: CardTitleH4 is not a constructor

e.g. the card title component, which has now a property with for different sizes of the heading and is exported as return new CardTitleH4(props); This dows not work in v4 any more.

How to update Dropdown with DropdownItem onClick

Hi,

@aichbauer Can you please help how to to update dropdown current item with dropdownItem menu

Thanks

readOnly prop

Please add readOnly props for dropdown too

Ability to use bootstrap classes

It would be nice to have a feature so that if my component is wrapped in your provider all children can use css classes like d-flex, text-danger, and so on.

Is this "sort-of" supported now?

Components should not rely on react-router-dom

My project uses router5 with mobx, so this dependency means that styled-bootstrap-components is not compatible without rewriting the NavLink component.

Fix: NavLink using with a router component

When using a router (in my case react-router-dom) with the NavBarLink component. I got a error warning from react. because we are nesting a-tags within a-tags which is not valid.

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

so we could add a new prop on Navlinks e.g. span and then use the styling from NavLink on a span instead of an a-tag, only when we apply this property. And if we do not use this property we should use a normal a-tag instead.

<Modal> lacks features from bootstrap's .modal

Currently Modal from styled-modal-component lacks features I expected from the modal component:

Backdrop with the ability to close the visible modal dialog by clicking outside of the dialog;
Preventing the body from scrolling while the dialog is open;
Animations for appearing and disappearing;

I created a version of Modal with needed features using some relatively straightforward approaches. It supports tall content that can be scrolled, only requires one component and mostly based on code from styled-modal-component.

Enhanced Modal

I think it would be nice to simplify current Modal's API to one component and add features from bootstrap. It's also possible to take inspiration from reactstrap's modal. For example, add a prop to hide backdrop or add returnFocusAfterClose prop.

This component can be integrated instead of current Modal almost without loss of possible use cases but with the change to API (encapsulation of ModalDialog and ModalContent).

aichbauer / styled-bootstrap-components Goto Github PK

styled-bootstrap-components's Introduction

styled-bootstrap-components

Table of Contents

Why?

Installation

Usage

Components

Related

License

styled-bootstrap-components's People

Contributors

Stargazers

Watchers

Forkers

styled-bootstrap-components's Issues

Recommend Projects

Recommend Topics

Recommend Org