https://github.com/duhdugg/preaction-bootstrap-clips
This is a small library of React components targeting Bootstrap v5. The primary intention of this project is to reduce the markup needed for commonly-used elements.
https://github.com/duhdugg/preaction-bootstrap-clips
bootstrap bootstrap5 npm-package react react-component-library
Last synced: 8 months ago
JSON representation
This is a small library of React components targeting Bootstrap v5. The primary intention of this project is to reduce the markup needed for commonly-used elements.
- Host: GitHub
- URL: https://github.com/duhdugg/preaction-bootstrap-clips
- Owner: duhdugg
- License: mit
- Created: 2020-05-13T20:09:49.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-08T07:42:08.000Z (about 3 years ago)
- Last Synced: 2025-06-30T16:06:27.356Z (9 months ago)
- Topics: bootstrap, bootstrap5, npm-package, react, react-component-library
- Language: JavaScript
- Homepage: https://duhdugg.github.io/preaction-bootstrap-clips/
- Size: 7.64 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Preaction Boostrap Clips
This is a small library of React components targeting Bootstrap v5. The primary intention of this project is to reduce the markup needed for commonly-used elements.
Components provided by this library include:
- Alert
- Boilerplate
- Card
- Modal
- Nav
- NavBar
- Spinner
- Table
## Quick Start
The full documentation can be found in the [styleguide](https://duhdugg.github.io/preaction-bootstrap-clips/v5/index.html) with live, editable examples.
### Installation
`npm install --save-dev @preaction/bootstrap-clips`
Important: `bootstrap` is a peerDependency of this library, and `@popperjs/core` is a peerDependency of bootstrap. You will need to install these in your project as well.
`npm install --save-dev bootstrap @popperjs/core`
### Usage
```jsx
// bootstrap as a peerDependency means you need to import bootstrap CSS yourself.
// This gives you the flexibility to choose a different build or theme, if you wish.
import 'bootstrap/dist/css/bootstrap.min.css'
// library css needs to be imported separately after bootstrap
import '@preaction/bootstrap-clips/dist/preaction-bootstrap-clips.css'
// component imports must be named, to allow shaking unused components from your bundle
import { Boilerplate, Card } from '@preaction/bootstrap-clips'
// this is an example of how your application may choose to use a simple template,
// using fractions to determine the width of cards in a row at different breakpoints
// see the full documentation for more examples
function App() {
const cardWidths = { md: 1 / 2, lg: 1 / 3, xl: 1 / 4, xxl: 1 / 6 }
return (
Greetings, Earthlings!
Howdy, Partner!
Hey, Stranger!
Yo, Punk!
)
}
```
### License
> Copyright (c) 2018-2022 Doug Elkin
>
> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to deal
> in the Software without restriction, including without limitation the rights
> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the Software is
> furnished to do so, subject to the following conditions:
>
> The above copyright notice and this permission notice shall be included in
> all copies or substantial portions of the Software.
>
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.