To utilize HTMLPLUS
components in your React application, you can opt for one of these two ways. (Click each title to show more).
React
library (Recommanded)
To avoid standard HTML Custom Elements having problem with non-scalar data we recommand that you use custom events, You can follow these steps.
1- Create React App
With an application built using the create-react-app script the easiest way to include the component library
2- Install
Installing HTMLPLUS
package using node package manager.
npm install @htmlplus/react
3- Usage
Finally you can easily use the web components in your application in this format.
import React from 'react'; import { Switch } from '@htmlplus/react'; const App = () => <Switch/>; export default App;
4- Properties
You can use this example to set properteis and attributes to web components.
import React from 'react'; import { Switch } from '@htmlplus/react'; const App = () => <Switch reverse/>; export default App;
5- Events
Events should be written in this format.
import React from 'react'; import { Switch } from '@htmlplus/react'; const App = () => <Switch onChange={() => alert('The switch toggled!')} />; export default App;
Web Components
directly
In this way we use standard HTML Custom Elements directly, You can follow these steps.
1- Create React App
With an application built using the create-react-app script the easiest way to include the component library.
2- Install
Installing HTMLPLUS
package using node package manager.
npm install @htmlplus/react
3- Usage
Finally you can easily use the web components in your application in this format.
import React from 'react'; const App = () => <plus-switch/>; export default App;
4- Properties
You can use this example to set properteis and attributes to web components.
import React from 'react'; const App = () => <plus-switch reverse/>; export default App;
5- Events
Events should be written in this format.
import React, { useEffect, useRef } from 'react'; const App = () => { const switchRef = useRef(null); const callback = () => alert('The switch toggled!'); useEffect(() => { switchRef.current.addEventListener('plusChange', callback); return () => switchRef.current.removeEventListener('plusChange', callback); }, []); return <plus-switch ref={switchRef}/> } export default App;