npm package: @iobroker/vis-2-widgets-react-dev
Description: React classes to develop vis widgets interfaces for ioBroker with react.
Author: bluefox
Latest version: 4.0.4

# Help ReactJS classes for development of vis widgets based on ReactJS

## Development
How to develop a vis widget based on React?

See here: https://github.com/ioBroker/ioBroker.vis-2-widgets-react-template

## Migration v2 => v3
- Add to import `import { getProps } from '@iobroker/vis-2-widgets-react-dev/visDevUtils';`
- Add in constructor
```
    constructor(props) {
        super(props);
        this.refParent = React.createRef();

        this.widgetProps = getProps(
            {
                socket: this.socket,
                theme: this.state.theme,
                refParent: this.refParent,
            },
            {
                // Your test settings for widget
                type: 'all',
            },
            {
                // Your test styles for widget
                width: 600,
                height: 200,
            },
        );
    }
```
- Modify renderer
```
    renderWidget() {
        return <div
            ref={this.refParent}
            style={{
                width: 600,
                height: 200,
            }}
        >
            <DemoWidget
                {...this.widgetProps}
            />
        </div>;
    }
``` 

Here is an example of the widget:

```jsx
import React from 'react';

import WidgetDemoApp from '@iobroker/vis-2-widgets-react-dev/widgetDemoApp';
import { I18n } from '@iobroker/adapter-react-v5';

import { getProps } from '@iobroker/vis-2-widgets-react-dev/visDevUtils';

import DemoWidget from './DemoWidget';
import translations from './translations';

class App extends WidgetDemoApp {
    constructor(props) {
        super(props);

        // init translations
        I18n.extendTranslations(translations);

        this.refParent = React.createRef();

        this.widgetProps = getProps(
            {
                socket: this.socket,
                theme: this.state.theme,
                refParent: this.refParent,
            },
            {
                type: 'all',
            },
            {
                width: 600,
                height: 200,
            },
        );
    }

    renderWidget() {
        return <div
            ref={this.refParent}
            style={{
                width: 600,
                height: 200,
            }}
        >
            <DemoWidget
                {...this.widgetProps}
            />
        </div>;
    }
}

export default App;
```

<!--
	Placeholder for the next version (at the beginning of the line):
	### **WORK IN PROGRESS**
-->

## Changelog
### 4.0.4 (2024-11-25)
* (bluefox) Updated adapter-react-v5

### 4.0.3 (2024-09-05)
* (bluefox) Improvement for vis-2 widgets
* (bluefox) Removed gulp from a build process

### 3.0.7 (2024-07-23)
* (bluefox) Optimization of packages

### 3.0.6 (2024-07-22)
* (bluefox) Corrected `deleteFoldersRecursive` function

### 3.0.5 (2024-07-20)
* (bluefox) Rewritten with typescript

### 2.0.2 (2024-07-10)
* (bluefox) Updated packages

### 2.0.1 (2024-06-30)
* (Steiger04) Removed version warning

### 2.0.0 (2024-06-30)
* (bluefox) Removed dependency to `@mui/styles`

### 1.0.7 (2024-06-09)
* (bluefox) updated packages

### 1.0.6 (2024-04-18)
* (bluefox) added getWidgetView to visRxWidget

### 1.0.5 (2023-12-05)
* (bluefox) updated packages

### 1.0.2 (2023-12-04)
* (foxriver76) port to `@iobroker/types`

### 1.0.1 (2023-11-07)
* (bluefox) Corrected error in deleteFoldersRecursive

### 1.0.0 (2023-10-31)
* (bluefox) Updated packages

### 0.4.6 (2023-07-31)
* (bluefox) Corrected simulation of widgets

### 0.4.5 (2023-07-30)
* (bluefox) Packages updated

### 0.4.4 (2023-07-01)
* (bluefox) Corrected simulation of widgets

### 0.4.2 (2023-06-27)
* (bluefox) Packages updated

### 0.4.0 (2023-06-07)
* (bluefox) Packages updated
* (bluefox) Disable `craco-esbuild` plugin

### 0.3.19 (2023-03-22)
* (bluefox) Added gulp helper

### 0.3.16 (2023-03-17)
* (bluefox) Added developer settings: proxy

### 0.3.15 (2023-03-07)
* (bluefox) Try to fix error in webpack

### 0.3.14 (2023-02-27)
* (dilesoft) Try to fix error in webpack

### 0.3.11 (2023-02-22)
* (bluefox) added some common methods like `formatValue` or `wrapContent`

### 0.3.10 (2023-02-22)
* (bluefox) GUI packages updated

### 0.3.9 (2022-11-15)
* Better i18n support

### 0.3.6 (2022-10-26)
* (bluefox) Better i18n support

### 0.3.3 (2022-10-11)
* (bluefox) Better i18n support

### 0.3.2 (2022-08-15)
* (bluefox) Added method onStateUpdated

### 0.3.1 (2022-08-04)
* (bluefox) Added search for i18n keys in the tooltips

### 0.3.0 (2022-08-02)
* (bluefox) Renamed to `vis-2-widgets-react-dev`

### 0.2.3 (2022-08-02)
* (bluefox) Corrected simulation of `data` and `style`

### 0.2.2 (2022-07-25)
* (bluefox) Added search for i18n keys in the code

### 0.1.7 (2022-07-22)
* (bluefox) Added `modulefederation` and `craco` config files

### 0.1.5 (2022-07-20)
* (bluefox) visRxWidget was optimized

### 0.1.1 (2022-07-08)
* (bluefox) initial commit

## License
The MIT License (MIT)

Copyright (c) 2022-2024 bluefox <dogafox@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.