How to use changes in React

Using the widget

import React, { useRef, useEffect } from 'react';
import Widget from 'changelog-widget';

let MyComponent = () => {
  let buttonRef = useRef();

  useEffect(() => {
    // Make sure that the element is not null
    if (!buttonRef.current) return;

    // Create a new widget and mount it to the button
    let wg = new Widget({
      id: 'Y1k_C5lZ', 
      key: 'IK-X2zvTYjp-NCg-3q2Rj',
      element: buttonRef.current 
    });

    // Destruct the widget
    return () => {
      wg.remove();
    }
  }, [buttonRef.current]);

  return (
    <div>
      {/* ... */}
      <button ref={ buttonRef }>Changelog</button>
      {/* ... */}
    </div>
  )
}

Using the sidebar

import React, { useCallback } from 'react';
import Bar from 'changelog-sidebar';

let sb = new Bar({
  key: 'IK-X2zvTYjp-NCg-3q2Rj',
  id: 'Y1k_C5lZ'
});

let MyComponent = () => {
  let toggleChangelog = useCallback(() => {
    sb.toggle();
  }, []);

  return (
    <div>
      {/* ... */}
      <button onClick={ toggleChangelog }>Changelog</button>
      {/* ... */}
    </div>
  )
}

Related

Using the widget.

How to display a changelog on your own website.

Using the sidebar.

How to display a changelog-sidebar on your own website.