React

Learn more about using OLYSENSE Design System components with React

Overview

The Olysense Design System offers a React version of every component to provide an idiomatic experience for React users. You can easily toggle between HTML and React examples throughout the documentation.

The sections below describe some of the differerences between Web Components and React Components.

Events

Many OLYSENSE components emit custom events. For example, the Button component emits the ods-focus event when it receives focus. In React, you can listen for the event using onOdsFocus.

Here’s how you can bind the input’s value to a state variable. 

import { useState } from 'react';
import { OdsButton } from '@ods/components/react';


function MyComponent() {
  const [value, setValue] = useState('');


  return <OdsButton onOdsFocus={event => setValue(event.target.value)} />;
}


export default MyComponent;

If you’re using TypeScript, it’s important to note that event.target will be a reference to the underlying custom element. You can use (event.target as any).value as a quick fix, or you can strongly type the event target as shown below. 

import { useState } from 'react';
import { OdsButton } from '@ods/components/react';
import type OdsButton from '@ods/components/react';


function MyComponent() {
  const [value, setValue] = useState('');


  return <OdsButton value={value} onOdsFocus={event => setValue((event.target as OdsButton).value)} />;
}


export default MyComponent;

You can also import the event type for use in your callbacks, shown below. 

import { useCallback, useState } from 'react';
import { OdsButton } from '@ods/components/react';
import type OdsFocusEvent from '@ods/components/react';
import type OdsButton from '@ods/components/react';


function MyComponent() {
  const [value, setValue] = useState('');
  const onInput = useCallback((event: OdsFocusEvent) => {
    setValue(event.detail);
  }, []);


  return <OdsButton value={value} onOdsFocus={event => setValue((event.target as OdsButton).value)} />;
}


export default MyComponent;

Slots

You can use Slots with the React version of our components when they are available.

Using default slot
<OdsButton onclick>Click me</OdsButton>

Some components also have named slots. A named slot can be populated by adding a child element with the appropriate slot attribute. Notice how the icon below has the slot=“prefix” attribute? This tells the component to place the icon into its prefix slot.

Using named slot
<OdsButton>
  <OdsIcon slot="prefix" name="trash" />
  Delete
</OdsButton>

Pass Complex Data 

<OdsApplicationUserMenu
  languages={
    [
      {
        label: 'English',
        description: 'English'
      },
      {
        label: 'Deutsch',
        description: 'Germany'
      }
    ]
  } />

Search