{"id":24961313,"url":"https://github.com/streammedev/react-flyout","last_synced_at":"2025-07-25T21:02:40.945Z","repository":{"id":57163122,"uuid":"59866384","full_name":"StreamMeDev/react-flyout","owner":"StreamMeDev","description":"A React Flyout Component","archived":false,"fork":false,"pushed_at":"2018-03-01T09:33:43.000Z","size":99,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-04T11:15:59.841Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StreamMeDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-27T22:27:29.000Z","updated_at":"2022-09-28T12:50:29.000Z","dependencies_parsed_at":"2022-09-01T00:20:10.834Z","dependency_job_id":null,"html_url":"https://github.com/StreamMeDev/react-flyout","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StreamMeDev%2Freact-flyout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StreamMeDev%2Freact-flyout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StreamMeDev%2Freact-flyout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StreamMeDev%2Freact-flyout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StreamMeDev","download_url":"https://codeload.github.com/StreamMeDev/react-flyout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246108357,"owners_count":20724715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-03T08:52:08.140Z","updated_at":"2025-03-28T22:27:37.945Z","avatar_url":"https://github.com/StreamMeDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Flyout Component\n\n[![NPM Version](https://img.shields.io/npm/v/@streammedev/flyout.svg)](https://npmjs.org/package/@streammedev/flyout)\n[![NPM Downloads](https://img.shields.io/npm/dm/@streammedev/flyout.svg)](https://npmjs.org/package/@streammedev/flyout)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nAn flyout component for React.\n\n## Install\n\n```\n$ npm install --save @streammedev/flyout\n```\n\n## Usage\n\n```javascript\nvar Flyout = require('@streammedev/flyout')\nvar FlyoutToggle = Flyout.FlyoutToggle\n\nmodule.exports = React.createClass({\n  displayName: 'OriginMenu',\n  propType: {\n    originServers: React.PropTypes.array.isRequired,\n    selectedOrigin: React.PropTypes.object.isRequired,\n    changeOrigin: React.PropTypes.func.isRequired\n  },\n  render: function () {\n    return (\n      \u003cFlyout menu className=\"origins\"\u003e\n        \u003cFlyoutToggle className=\"origins-toggle\"\u003e{this.props.selectedOrigin.broadcastUrl}\u003c/FlyoutToggle\u003e\n        {this.props.originServers.map(function (o) {\n          var id = o.region + o.broadcastUrl\n          return \u003cdiv className=\"origin\" key={id} itemKey={id} onClick={this.props.changeOrigin.bind(this, o)}\u003e{o.region}\u003c/div\u003e\n        }.bind(this))}\n      \u003c/FlyoutMenu\u003e\n    )\n  }\n})\n```\n\n### Options/Props\n\n```javascript\n{\n  closeOnWindowBlur: propTypes.bool, // Close flyout on window blur event, default: false\n  closeOnExternalClick: propTypes.bool, // Close flyout when a user clicks somewhere else on the page, default: false\n  closeOnEscape: propTypes.bool, // close flyout on escape key, default: true\n  initialOpen: propTypes.bool, // The inital open state, default: false\n  renderWhenClosed: propTypes.bool, // Render the flyout and use css to hide it, default: false\n  className: propTypes.string,  // Class name override, default: 'flyout'\n  children: propTypes.node, // Nest children to display in the flyout\n  element: propTypes.string, // The dom node type to use 'div'\n  menu: propTypes.bool // Render as a menu, wraps items in li tags and element defaults to 'ol'\n}\n```\n\n### Smart vs. Dumb Components\n\nThe main export from this package is a \"smart\" or \"managed\" component.  It manages it's state internally, only loading initial state\nfrom outside.  If you need to directly manage the state yourself, you can use the \"dumb\" or \"stateless\" components.  They are exported\nby name as `Flyout`, `FlyoutMenu` and `FlyoutToggle`.  If you need to do more complicated things, like ensuring only one of two adjacent\nflyouts are open at a time, then you should use these and implement your own logic for state management.  Use the code found in `src/index.jsx`\nfor reference on how to implement the options and state.\n\n\n## Development\n\nThis package follows semver, when you wish to publish a version run the proper npm command.  For example, if we made a bug fix you can do this:\n\n```\n$ npm version patch\n$ git push\n$ npm publish\n```\n\nHere are the other types of version bumps:\n\n- Major (`npm version major`): This is for breaking changes. Anytime a method is changed or the functionality is modified this bump should be made.\n- Minor (`npm version minor`): This is for features additions. When a new method is added which doesn't affect the behavior of existing features, this bump should be made.\n- Patch (`npm version patch`): This is for bug fixes. Only bump this if it is safe for production code to update wihout being QA'd.  (AKA, almost never)\n\nFor each of these you can run a 'pre' version by prepending to the command, ex `npm version preminor`.\n\nAll feature development should be done on a branch off `master`.  When a feature is complete and the pull request approved, publish a 'pre' version of the package for testing across environments.  To install that 'pre' version of the package do the following, where the verison number contains the correct 'pre' version:\n\n```\n$ npm install --save @streammedev/flyout@1.0.0-0\n```\n\nRunning the tests:\n\n```\n$ npm install \u0026\u0026 npm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreammedev%2Freact-flyout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreammedev%2Freact-flyout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreammedev%2Freact-flyout/lists"}