@21epub/float-panel

React Float panel

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