React

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;

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;