React-WinBox
A React controlled component for WinBox.js, with full Reactful props and state. Includes all configuration of WinBox.js by using React component props.
Full type declaration for both JavaScript and TypeScript.
Play the Demo
Install
npm install --save react-winbox
yarn add react-winbox
Usage
To use WinBox, ensure the document body has an initial non-zero height, e.g. 100vh
.
import 'winbox/dist/css/winbox.min.css';
import 'winbox/dist/css/themes/modern.min.css';
import WinBox from 'react-winbox';
<WinBox
width={this.state.boxWidth ?? 500}
height={300}
x="center"
y={30}
noClose={this.state.inEditing}
>
<div>
<h1>Hello, WinBox!</h1>
<MyComponent myProps={1} onChange={this.handleChange}/>
</div>
</WinBox>
Or you can do more one step, to make a genuine 'windows manager', just like:
const [windows, setWindows] = useState([]);
const handleClose = (id) => {
let state = [...windows];
const index = state.findIndex(info => info.id === id);
if (index !== -1) {
state.splice(index, 1);
setTimeout(() => setWindows(state));
}
};
return (
<>
{windows.map(info => (
<WinBox
key={info.id}
id={info.id}
onclose={() => handleClose(info.id)}
{...info.neededProps} // assign any props you want to WinBox
>
<div>Some children</div>
</WinBox>
))}
</>
);
Notice
- To open a winbox, just create it in your virtual DOM, that's enough.
- To close a winbox, just do not render it. It's safe.
onclose
is called BEFORE the winbox goes to close process. It is easy to block a closing for some unsaved data or giving a confirmation to user to close (see the doc to get more info). However, if you do not want to block the closing, but want to destroy the React WinBox component, be sure to wrap destroying actions within setTimeout
so that they occur after the winbox.js DOM is truly closed, e.g. setTimeout(() => setShowWindow(false))
.- To change some properties of the winbox DOM, just change the component's properties. The properties need official methods support. We suggest that all states you want to control of the winbox should be listened for changes and keep controlled, such as
width
state with onResize
callback. But if you do not have such listeners, you can call the forceUpdate
method from refs to keep the winbox status in control as well. - If you want to operate the pure WinBox.js object manually, you can find a
winBoxObj
in the component ref. It's needed only when you want to call mount()
method.
Props and Methods
See the official document for WinBox.js
Props
the most props are one-to-one corresponding to the params of WinBox.js.
type WinBoxPropType = {
title: string
id?: string
children?: ReactElement | ReactElement[] | null
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 | undefined | void,
onmove?: (x: number, y: number) => any,
onresize?: (width: number, height: number) => any,
onblur?: () => any,
onfocus?: () => any,
className?: string | number,
}
Methods
use React Ref to call these methods
focus () => void
getId () => string | undefined
isMax () => boolean
isMin () => boolean
isClosed () => boolean
forceUpdate (callback?: () => void): void
Thanks for your reading. If any question or problem, feel free to issue it.