Socket
Socket
Sign inDemoInstall

react-panels

Package Overview
Dependencies
34
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-panels

React.js panel component with tabs, toolbars, buttons, floating windows and customizable themes


Version published
Maintainers
1
Weekly downloads
61
decreased by-18.67%

Weekly downloads

Readme

Source

react-panels

Demo/examples   Features   Playground   Install   Usage

A multipurpose tabbed panel component with many features. Using React v0.13.1 with addons.

NPM

Features

  • No dependencies, single JS file with React inline styles.
    • Written to be browser first from the start so our browser build is a simple javascript file instead of a webpack/browserify bundle like in other react components. Nevertheless, this doesn't mean that react-panels is not suited for other kind of projects since a CommonJS build is also provided.
  • Support for themes and skins.
    • Available themes: chemical demo, flexbox demo, flexbox2 No demo yet.
    • Wanna share one of your own? Open an issue or make a pull request.
  • Fixed or as a draggable floating panel.
  • Multi-content components and toggleable footer and toolbars in tabs.
  • Auto-collapsible tab header buttons when don't fit in a single row.
  • Custom panel buttons.
  • Easily extensible by mixins. Not documented yet
  • Animations demo
  • Drag&drop tabs demo Warning: In development, subject to change.

Roadmap

  • Optional className in props to allow CSS styling.
  • Restore collapsed tab headers when there's available space. (not needed in flex based themes)
  • Allow prebuilt styles to increase performance.
  • More...

Install

Using bower

bower install react-panels

Include bower_components/react-panels/dist/react-panels[.min].js after react-with-addons[.min].js

Using npm

npm install react-panels
var ReactPanels = require('react-panels')
// or
var ReactPanels = require('react-panels/addons')

Usage

Example usage:

var Panel = ReactPanels.Panel;
var Tab = ReactPanels.Tab;
var Toolbar = ReactPanels.Toolbar;
var Content = ReactPanels.Content;
var Footer = ReactPanels.Footer;

var MyPanel = React.createClass({
  render: function () {
    return (
      <Panel theme="chemical">
        <Tab title="One" icon="fa fa-plane">
          <Toolbar>Toolbar content of One</Toolbar>
          <Content>Content of One</Content>
          <Footer>Footer content of One</Footer>
        </Tab>
        <Tab title="Two" icon="fa fa-fire">
          <Content>Content of Two</Content>
        </Tab>
      </Panel>
    );
  }
});

Documentation for react-panels v2 is not available yet but you can take a look at the working examples for easy usages of almost all its features.

Contributing

Feel free to fork this repo and make a PR. Any help is welcome, even fixing typos. I created react-panels to use it myself and I'm mostly adding new features or bug fixes on a need basis. So, if you need something specific, you can add/fix it yourself or open a new issue and I'll provide feedback as soon as possible.

Thanks to

Compatibility

License

The MIT License (MIT)

Keywords

FAQs

Last updated on 12 May 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc