HTMLPLUS

React

To utilize HTMLPLUS components in your React application, you can opt for one of these two ways. (Click each title to show more).


Using 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;

Using 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;
Prev
Why HTMLPLUS?
Next
Browser support