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>
    )
  }
}

7 comments:

  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
  2. Really Great post! I am actually getting ready to across this information, is very helpful for me my friend. HP Customer Service We are hp service provider and we have a team of the highly trained employee working 24×7 to resolve your problem.

    ReplyDelete
  3. We are needed this http://123essay.org/writing-help-com-review/ article for improving your work place at innovation. So we are all must drive with employees to try new ideas from reviews. Then every user happy to get your great articles and reviews.

    ReplyDelete
  4. I vote on the question or comment. I will also make comment if I feel my words contribute to the discussion and has not be completely duplicated by someone else's words. I am interested in all of the discussions, although I may not be able to post my opinions because my workplace and I have to wait until the end of the day to make my comment or provide an answer.
    light novel

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts