rrp
react-rectangle-popup-menu
npm i react-rectangle-popup-menu
rrp

react-rectangle-popup-menu

React rectangle popup menu library

by Alexander Buzin

0.0.1 (see all)License:MITTypeScript:Not Found
npm i react-rectangle-popup-menu
Readme

react-rectangle-popup-menu

React rectangle popup menu library. Demo

<PopupMenu />

class Popup {
  render() {
    <PopupMenu>
        // Content
    </PopupMenu>
  }
}

Parameters for <PopupMenu />

{
    width: ?number = 200,
    height: ?(number | 'auto') = 'auto', // If auto it's minimized to rows size
    direction: ?('top' | 'bottom' | 'left' | 'right') = 'top'
}

<PopupTable />

import FontAwesome from 'react-fontawesome';

const button = (<FontAwesome name="rocket" size="2x" />);

class Popup {
  render() {
    <PopupMenu width={190} direction="bottom" button={button}>
      <PopupTable rowItems={4}>
        <FontAwesome name="google-plus-square" size="2x" />
        <FontAwesome name="twitter-square" size="2x" />
        <FontAwesome name="google" size="2x" />
        <FontAwesome name="google" size="2x" />

        <FontAwesome name="facebook-official" size="2x" />
        <FontAwesome name="twitter-square" size="2x" />
        <FontAwesome name="spotify" size="2x" />
        <FontAwesome name="twitter-square" size="2x" />

        <FontAwesome name="google-plus-square" size="2x" />
        <FontAwesome name="google" size="2x" />
        <FontAwesome name="twitter-square" size="2x" />
      </PopupTable>
    </PopupMenu>
  }
}

Parameters for <PopupTable />

{
    // Items per row (used to generate normal width of placeholder)
    rowItems: ?number = 1
}

<PopupText />

class Popup {
  render() {
    <PopupMenu width={190} direction="bottom" button={button}>
      <PopupText>Some text</PopupText>
    </PopupMenu>
  }
}

Downloads/wk

2

GitHub Stars

51

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

1
VersionTagPublished
0.0.1
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate