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:
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
