# react-bootstrap-enhanced

> An enhanced version of react-bootstrap for common UI.

Latest version **0.2.0** (published 2021-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bootstrap-enhanced
pnpm add react-bootstrap-enhanced
yarn add react-bootstrap-enhanced
bun add react-bootstrap-enhanced
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-01-27 |
| First published | 2020-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 59.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yelwinsoe |
| Maintainers | yelwinsoe |
| Keywords | react, bootstrap, ui component |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap-enhanced
- Repository: https://github.com/yelwinsoe/react-bootstrap-enhanced
- Homepage: https://github.com/yelwinsoe/react-bootstrap-enhanced#readme
- Issues: https://github.com/yelwinsoe/react-bootstrap-enhanced/issues
- npm.io page: https://npm.io/package/react-bootstrap-enhanced

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2021-01-27
- 0.1.8 — 2021-01-27
- 0.1.7 — 2021-01-27
- 0.1.6 — 2020-12-25
- 0.1.5 — 2020-12-17
- 0.1.4 — 2020-12-17
- 0.1.3 — 2020-12-16
- 0.1.2 — 2020-12-11
- 0.1.1 — 2020-12-08
- 0.1.0 — 2020-12-08
- 0.0.9 — 2020-12-04
- 0.0.8 — 2020-12-04
- 0.0.7 — 2020-12-04
- 0.0.6 — 2020-12-04
- 0.0.5 — 2020-12-04
- … 4 more at https://npm.io/package/react-bootstrap-enhanced/versions

## README

# react-bootstrap-enhanced

> An enhanced version of react-bootstrap for common UI.

[![NPM](https://img.shields.io/npm/v/react-bootstrap-enhanced.svg)](https://www.npmjs.com/package/react-bootstrap-enhanced) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-bootstrap-enhanced react-bootstrap bootstrap
```

## Usage
### PaginationPlus
```jsx
import { PaginationPlus } from 'react-bootstrap-enhanced'

<PaginationPlus 
  total={100} // Mandatory - total number of record
  pageSize={10} // Mandatory - number of record per page
/>
```
#### Params
| Name | Default | Required | Description |
| ---- | ------- | ---------- | -------- |
| total | NA | Yes | Total number of record |
| pageSize | 10 | Yes | Number of record per page |
| allPageSize | [10, 20, 40, 80, 160] | No | List of pageSize to change pageSize |
| currentPage | 1 | No | Current selected page |
| style | NA | No | Optional Bootstrap pagination style |
| size | NA | No | Optional size 'sm/md/lg' |
| onChange | NA | No | On page changes, new page number as a param |
| onPageSizeChange | NA | No | New page size as a param, this is needed for page size selection |

### Layout
```jsx
import { Layout } from 'react-bootstrap-enhanced'

<Layout
  sidebarWidth='250px'
  sidebarBackgroundColor='#000'
  showSidebar={showSidebar}
  onSidebarChange={(status) => {
    setShowSidebar(status)
  }}
  sidebar={
    <div>
      <div style={{ textAlign: 'center', color: 'white' }}>
        <br />
        <img src={logo} alt='test' width={50} />
        <h5>React Bootstrap</h5>
        <br />
      </div>
      <Nav defaultActiveKey='/home' className='flex-column'>
        <Nav.Link href='/home'>Active</Nav.Link>
        <Nav.Link eventKey='link-1'>Link</Nav.Link>
      </Nav>
    </div>
  }
  topbar={
    <div>
      <Nav defaultActiveKey='/home'>
        <Nav.Link onClick={handleShowSidebar}>Sidebar</Nav.Link>
        <Nav.Link href='/home'>Active</Nav.Link>
      </Nav>
    </div>
  }
  content={
    <div>
      <h1>Hello World!</h1>
    </div>
  }
```
#### Params
| Name | Default | Required | Description |
| ---- | ------- | ---------- | -------- |
| sidebarWidth | 250px | No | Width of sidebar |
| sidebarBackgroundColor | black | No | Set sidebar background color |
| showSidebar | true | No | Whether to show sidebar or not on page load |
| onSidebarChange | NA | Yes | On sidebar visibility change |
| sidebar | NA | No | Content of the sidebar |
| topbar | NA | No | Content of the topbar |
| content | NA | No | Content of the page |
| contentStyle | NA | No | To style 'div' wrapper of content |


## Contribution
This package is in development actively, feel free to do a pull request if you are interested in it. Thanks.
Refer to this [create-react-library](https://github.com/transitive-bullshit/create-react-library) for development guideline.
## License

[MIT](https://github.com/yelwinsoe/react-bootstrap-enhanced/blob/master/LICENSE) © [yelwinsoe](https://github.com/yelwinsoe)

---
_Source: https://npm.io/package/react-bootstrap-enhanced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._