@21epub/float-panel

React Float panel

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@21epub/float-panel
100.3.17 months ago2 years agoMinified + gzip package size for @21epub/float-panel in KB

Readme

@21epub/float-panel
React Float panel

NPM JavaScript Style Guide Build Status Codecov

Intro

This is a component for react.

Feature

  • x Easy-to-use
  • x Typescript Support

Install

npm install --save @21epub/float-panel

Usage

import React, { Component } from 'react'

import FloatPanel from '@21epub/float-panel'
import '@21epub/float-panel/dist/index.css'

class Example extends Component {
  render() {
    return <FloatPanel
          pos = {x : 0, y: 0, width: 200, height: "auto" },
          minWidth = {80},
          disableDragging = false,
          enableResizing = true,
          enableClose = false,
          title = 'Test',
          className = 'TestPanel',
          titleHeight = 22,
          titleBarStyle = {
            height: titleHeight
          },
          opts = {
            bounds: "window"
          }  // opts support Rnd opts ,such as  bounds , reference to : https://github.com/bokuweb/react-rnd
          > This is the panel content </FloatPanel>
  }
}

For Details: See Example

Developing and running on localhost

First install dependencies and then install peerDeps for parcel dev:
npm install
npm run install-peers

To run Example in hot module reloading mode:
npm start

To create a parcel example production build:
npm run build-prod

To create a bundle library module build:
npm run build

Running

Open the file dist/index.html in your browser

Testing

To run unit tests:
npm test

License

MIT © 21epub