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

MIT © yelwinsoe