React Window Manager Based On WinBox.js

A React wrapper for the winbox.js library, which allows you to create professional HTML5 windows with full Reactful props and state.

How to use it:

1. Install and import the react-winbox.

# Yarn
$ yarn add react-winbox

# NPM
$ npm i react-winbox
import WinBox from 'react-winbox';

2. Create a basic window in your app.

<WinBox
  width={this.state.boxWidth ?? 500}
  height={300}
  x="center"
  y={30}
  noClose={this.state.inEditing}
>
  <div>
    <h1>Hello World!</h1>
    <MyComponent myProps={1} onChange={this.handleChange}/>
  </div>
</WinBox>
};
//OR
const [windows, setWindows] = useState();
return (
  <>
    {windows.map(info => (
      // assign any prop you want to WinBox
      <WinBox {...info.neededProps}>
        <div>Some children</div>
      </WinBox>
    ))}
  </>
);

3. Available component props.

type WinBoxPropType = {
  title: string
  id?: string
  children?: ReactElement | ReactElement[] | null
  /**
   * When you use this, the children elements will be ignored.
   */
  url?: string
  noAnimation?: boolean,
  noShadow?: boolean,
  noHeader?: boolean,
  noMin?: boolean,
  noMax?: boolean,
  noFull?: boolean,
  noClose?: boolean,
  noResize?: boolean,
  noMove?: boolean,
  modal?: boolean,
  hide?: boolean,
  index?: number,
  border?: number,
  splitscreen?: boolean,
  background?: string,
  max?: boolean,
  min?: boolean,
  x?: string | number | 'center',
  y?: string | number | 'center',
  top?: string | number,
  bottom?: string | number,
  left?: string | number,
  right?: string | number,
  height?: string | number,
  width?: string | number,
  fullscreen?: boolean,
  onclose?: (force?: boolean) => boolean,
  onmove?: (x: number, y: number) => any,
  onresize?: (width: number, height: number) => any,
  onblur?: () => any,
  onfocus?: () => any,
  className?: string | number,
}

4. API methods.

focus () => void

getId () => string | undefined

isMax () => boolean

isMin () => boolean

isClosed () => boolean

forceUpdate (callback?: () => void): void

Preview:

React Window Manager Based On WinBox.js

Download Details:

Author: RickoNoNo3

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/RickoNoNo3/react-winbox

License: MIT

You Might Be Interested In:

Add Comment