@jswf/react


Virtual window component for React

１．Contents

$3

- Storybook

$3

Components for realizing virtual windows with React
Just enclose with JSWindow and it will become a virtual window

$3

- MoveWindow
- Resize
- Maximize
- Minimize
- Parent-child window
- SplitScreen
- ListView
- TreeView

２．Screen shot

!ScreenShot

３．links

- The website where the document is written
https://ttis.croud.jp/?uuid=b292d429-dbad-49b5-8fed-6d268f4feaf0

- Source code
https://github.com/JavaScript-WindowFramework/jswf-react

- Sample code
https://github.com/JavaScript-WindowFramework/jwf-react-sample01

- Operation sample
https://javascript-windowframework.github.io/jwf-react-sample01/dist/

４．Sample source

``tsx:index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
JSWindow,
WindowState,
WindowStyle,
WindowInfo,
SplitView,
SplitType
} from "@jswf/react";

function App() {
const frame = React.createRef();
const [info, setInfo] = React.useState(null);
const [type, setType] = React.useState("ew");
return (
<>
{/ -------- Simply display the window ------------/}

The content you put in this will be displayed on the virtual window


{/ -------- Window inside window ------------/}

If the window position is not set, it will be displayed in the center.


You can set the function used in windowStyle

If overlapped is set to false, it will be displayed in the client area,
if it is set to true, only the overlap will be adjusted.



{/ -------- Display window information ------------/}
setInfo(p)}>


          {info && JSON.stringify(info,["realX", "realY", "realWidth", "realHeight"]," ")}
        

``

５．Component list

| Name | Usage |
| ----------------------------------------------------------------------------- | --------------------------- |
| JSWindow | Virtual Window Components |
| SplitView | Component for region split |
| ListView | Similar to Windows ListView |
| TreeView | TreeView components |
| TreeItem | TreeView Item components |

６．license

MIT