How do I center the window?

Use windowParent = 'body' and set centered = true, or calculate position manually using viewport dimensions.

How do I prevent the window from being closed?

Handle the closing event and call e.preventDefault() to cancel the close action.

smart-html-elements

JavaScript

Angular

Vue

React

Getting Started with React Window Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/window/basic/App.jsx

1 Create a Vite + React + TypeScript app

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React,  { useState, useRef, useEffect } from "react";
import ReactDOM from 'react-dom/client';
import { Window } from 'smart-webcomponents-react/window';
import { Button } from 'smart-webcomponents-react/button';
export default function App() {
    const testalert = () => {
        alert("Hello");
    }
	
	  const buttonInput = useRef(null);
	  useEffect(() => {
    // Update the document title using the browser API
		buttonInput.current.onclick = testalert;
  });

return (
                <Window windowParent='body' opened label="Window 1">
                    <Button onClick={testalert}>jQWidgets button</Button>
                    <button ref={buttonInput}
                        type="button"
                        onClick={

                            testalert

                        }
                    >
                        <span>Html Button</span>
                    </button>
                </Window>
  )
};

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Common Use Cases

Open modal dialog
Show window as a modal overlay
```
window.modal = true;
window.open();
```

Handle close event

Execute code when window closes

smartWindow.addEventListener('close', () => {
  console.log('Window closed');
});

Troubleshooting

How do I center the window?: Use windowParent = 'body' and set centered = true, or calculate position manually using viewport dimensions.
How do I prevent the window from being closed?: Handle the closing event and call e.preventDefault() to cancel the close action.

TypeScript Support

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Window, WindowProps } from 'smart-webcomponents-react/window';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.