React components

You can use custom React components to extend the functionality of your Developer portal content. This topic describes a sample React component.

Component example

Clicks: 0

Code sample

Copy

Copied

import * as React from 'react';

export function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div style={{ border: '1px solid red', padding: '10px' }}>
      <div style={{ fontSize: '18px', marginBottom: '10px' }}>
        Clicks: <strong>{count}</strong>
      </div>
      <button onClick={() => setCount(count + 1)}> Click </button>
    </div>
  );
}

Usage in `MDX`

To use the component in your MDX, insert this code in your MDX file.