0.2.0 • Published 3 years ago
react-bootstrap-enhanced v0.2.0
react-bootstrap-enhanced
An enhanced version of react-bootstrap for common UI.
Install
npm install --save react-bootstrap-enhanced react-bootstrap bootstrap
Usage
PaginationPlus
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
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 for development guideline.
License
0.2.0
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago