@21epub/float-panel

React Float panel

Usage no npm install needed!

<script type="module">
  import 21epubFloatPanel from 'https://cdn.skypack.dev/@21epub/float-panel';
</script>

README

@21epub/float-panel

React Float panel

NPM JavaScript Style Guide Build Status Codecov

Intro

This is a component for react.

Feature

  • Easy-to-use
  • 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
          }
          > 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