By including this component, you can show overflown items in popover.  Lets see how to use this library. This library built on top of react-bootstrap so you should install react-bootstrap to use this

Using npm

npm install react-fit-items-popover --save

Import Component

import FitItemsPopover from 'react-fit-items-popover';

Usage

Here you can pass maximum width, popoverPlacement, popoverClassName, title, items
<FitItemsPopover 
  title="Countries"
  maxWidth="250px"
  popoverPlacement="top"
  popoverClassName="myCustomPopoverClass"
  items={['Iceland','India','Indonesia','Iran','Iraq','Ireland']}>
</FitItemsPopover>

Full example 

Here you can find the full example
import React from 'react';
import FitItemsPopover from 'react-fit-items-popover';
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import '../../node_modules/react-fit-items-popover/lib/react-fit-items-popover.css'

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>It Works </h1>
        <h3>FitItemsPopover example with popover placement</h3>
        <FitItemsPopover title="Countries" popoverPlacement="right" maxWidth="200px" items={['Iceland','India','Indonesia','Iran','Iraq','Ireland','Israel','Italy']}></FitItemsPopover>
      </div>
    )
  }
}

1 comment:

  1. Relevant information and the programing language gives technical idea.Currently we can get so many online services like best essay writing service. This kind of reputed internet service really give such an amazing offer with relevant price.Students and researcher also madly depends upon such a writing help.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts