{"id":22750310,"url":"https://github.com/webix-hub/react-demo","last_synced_at":"2025-04-14T13:04:00.293Z","repository":{"id":146867698,"uuid":"86034950","full_name":"webix-hub/react-demo","owner":"webix-hub","description":"Using Webix with React","archived":false,"fork":false,"pushed_at":"2020-07-07T09:33:00.000Z","size":70,"stargazers_count":14,"open_issues_count":1,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-09T21:15:11.323Z","etag":null,"topics":["react","webix","webix-integration"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webix-hub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-24T06:30:17.000Z","updated_at":"2023-05-28T07:25:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"accc60ae-190a-4707-a42c-11ab90794b97","html_url":"https://github.com/webix-hub/react-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Freact-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Freact-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Freact-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Freact-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webix-hub","download_url":"https://codeload.github.com/webix-hub/react-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229169544,"owners_count":18030692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","webix","webix-integration"],"created_at":"2024-12-11T04:13:50.136Z","updated_at":"2024-12-11T04:13:50.828Z","avatar_url":"https://github.com/webix-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Webix-React demo\n================\n\nThis project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\nYou can use Webix inside of React App, to add some rich widgets to the existing functionality.\n\nIf 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.\n\nHow to Start\n----------------\n\n[Grab the demo from Github](https://github.com/webix-hub/react-demo) if you haven't done this yet.\nThus you will get an example of integration usage.\n\nRun `npm install` and `npm start` after that. Open `http://localhost:3000` to view the demo in the browser.\n\nThe page will be reloading while you are editing form fields.\n\n**Production build**\n\nTo build the production version, run `npm run build`.\n\nIt will build the application for production to the *build* folder. After that your app is ready to be deployed.\n\n\nUsing Webix Widget in React App\n-------------------------------\n\nYou can create a React component with a Webix widget inside like this:\n\n~~~js\nconst ui = {\n\tview:\"slider\"\n};\nconst value = 123;\n\nconst SliderView = () =\u003e (\n  \u003cWebix ui={ui} data={value} /\u003e\n)\n~~~\n\nThe logic is the following:\n\n- use the tag  \u003c Webix \u003e to define a Webix widget\n- specify the necessary view in the *ui* object and define its config\n\nCreating Custom Webix-React Component\n--------------------------------\n\nInstead of using a prebuilt Webix component, there is a possibility to make a custom one.\nFor example, the code for a custom Slider component can look as follows:\n\n~~~js\nclass SliderView extends Component {\n  constructor(props) {\n    super(props);\n    this.uiContainer = React.createRef();\n  }\n\n  render() {\n    return (\n      \u003cdiv ref={this.uiContainer}\u003e\u003c/div\u003e\n    );\n  }\n\n  componentDidMount(){\n    webix.ready(() =\u003e {\n      this.ui = webix.ui({\n        view:\"slider\",\n        container:this.uiContainer.current,\n      });\n    })\n  }\n\n  componentWillUnmount(){\n    this.ui.destructor();\n    this.ui = null;\n  }\n\n  shouldComponentUpdate(){\n    return false;\n  }\n}\n~~~\n\nIn the above code we have created the SliderView component that contains a Webix slider inside.\n\nThe list of the defined methods is:\n\n- the **componentDidMount()** method creates a new component\n- the **componentWillUnmount()** method will destruct the component when it won't be needed anymore\n- the **shouldComponentUpdate()** method is responsible for the component's updates. In this example, updates for the component are disabled\n\nUsing Webix Widget with Redux\n-------------------------------\n\nYou can use a Webix widget with Redux without any extra customization required.\n\nFor custom components make sure that such a component returns *true* from **shouldComponentUpdate()** and provides\nthe **componentDidUpdate** handler to mutate the state of the Webix widget.\n\n~~~js\ncomponentDidUpdate(){\n    if (this.props.data)\n      this.setWebixData(this.props.data);\n    if (this.props.select)\n      this.select(this.props.select);\n},\nshouldComponentUpdate(){\n\treturn true;\n}\n~~~\nLicense\n--------\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Freact-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebix-hub%2Freact-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Freact-demo/lists"}