Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webix-hub/react-demo
Using Webix with React
https://github.com/webix-hub/react-demo
react webix webix-integration
Last synced: 12 days ago
JSON representation
Using Webix with React
- Host: GitHub
- URL: https://github.com/webix-hub/react-demo
- Owner: webix-hub
- Created: 2017-03-24T06:30:17.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-07-07T09:33:00.000Z (over 4 years ago)
- Last Synced: 2024-04-09T21:15:11.323Z (9 months ago)
- Topics: react, webix, webix-integration
- Language: JavaScript
- Size: 68.4 KB
- Stars: 14
- Watchers: 5
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Webix-React demo
================
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
You can use Webix inside of React App, to add some rich widgets to the existing functionality.
If you plan to use Webix for most UI in the app, please check [Webix Jet](https://webix.gitbook.io/webix-jet) first. It is a micro-framework for building Webix-based apps.
How to Start
----------------
[Grab the demo from Github](https://github.com/webix-hub/react-demo) if you haven't done this yet.
Thus you will get an example of integration usage.
Run `npm install` and `npm start` after that. Open `http://localhost:3000` to view the demo in the browser.
The page will be reloading while you are editing form fields.
**Production build**
To build the production version, run `npm run build`.
It will build the application for production to the *build* folder. After that your app is ready to be deployed.
Using Webix Widget in React App
-------------------------------
You can create a React component with a Webix widget inside like this:
~~~js
const ui = {
view:"slider"
};
const value = 123;
const SliderView = () => (
)
~~~
The logic is the following:
- use the tag < Webix > to define a Webix widget
- specify the necessary view in the *ui* object and define its config
Creating Custom Webix-React Component
--------------------------------
Instead of using a prebuilt Webix component, there is a possibility to make a custom one.
For example, the code for a custom Slider component can look as follows:
~~~js
class SliderView extends Component {
constructor(props) {
super(props);
this.uiContainer = React.createRef();
}
render() {
return (
);
}
componentDidMount(){
webix.ready(() => {
this.ui = webix.ui({
view:"slider",
container:this.uiContainer.current,
});
})
}
componentWillUnmount(){
this.ui.destructor();
this.ui = null;
}
shouldComponentUpdate(){
return false;
}
}
~~~
In the above code we have created the SliderView component that contains a Webix slider inside.
The list of the defined methods is:
- the **componentDidMount()** method creates a new component
- the **componentWillUnmount()** method will destruct the component when it won't be needed anymore
- the **shouldComponentUpdate()** method is responsible for the component's updates. In this example, updates for the component are disabled
Using Webix Widget with Redux
-------------------------------
You can use a Webix widget with Redux without any extra customization required.
For custom components make sure that such a component returns *true* from **shouldComponentUpdate()** and provides
the **componentDidUpdate** handler to mutate the state of the Webix widget.
~~~js
componentDidUpdate(){
if (this.props.data)
this.setWebixData(this.props.data);
if (this.props.select)
this.select(this.props.select);
},
shouldComponentUpdate(){
return true;
}
~~~
License
--------
MIT