react-fit-items-popover : Show Overflown Items In Popover Using ReactJS

Saturday, 11 March 2017 | Posted by
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>
    )
  }
}
Labels:

6 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

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts