useSignal() Hook

use-signal.js

const initialState = {
  activated: false,
  resolve: () => {},
};

function useSignal() {
  const [state, setState] = useState(initialState);

  function init() {
    return new Promise((resolve) => {
      setState({
        activated: true,
        resolve,
      });
    });
  }

  function ok() {
    state.resolve(true);
    setState(initialState);
  }

  function cancel() {
    state.resolve(false);
    setState(initialState);
  }

  return {
    init,
    ok,
    cancel,
    activated: state.activated,
  };
}

// usage
function FormApp() {
  const signal = useSignal();

  async function submit() {
    const confirmed = await signal.init();

    if (confirmed) {
      // do something
    } else {
      // do something else
    }
  }

  return (
    <div>
      <button onClick={submit}>Submit</button>

      <Dialog open={signal.activated}>
        <button onClick={signal.ok}>OK</button>
        <button onClick={signal.cancel}>Cancel</button>
      </Dialog>
    </div>
  );
}