Button.js — react Source File

Architecture documentation for Button.js, a javascript file in the react codebase. 3 imports, 1 dependents.

File javascript BabelCompiler Optimization 3 imports 1 dependents 2 functions

Entity Profile

BabelCompiler→ Optimization→ Button.js — react Source File

Dependency Diagram

graph LR
  317029de_e52e_edc1_0ba6_c44bc97613ff["Button.js"]
  a0b98e8f_be9f_23db_e6ce_8f9a041223a2["ErrorBoundary.js"]
  317029de_e52e_edc1_0ba6_c44bc97613ff --> a0b98e8f_be9f_23db_e6ce_8f9a041223a2
  9ee6daf6_99cf_7974_5b8e_3c395c9b9c45["ErrorBoundary"]
  317029de_e52e_edc1_0ba6_c44bc97613ff --> 9ee6daf6_99cf_7974_5b8e_3c395c9b9c45
  4d0c4ccc_5970_e7f9_458f_15f0290099b1["react-dom"]
  317029de_e52e_edc1_0ba6_c44bc97613ff --> 4d0c4ccc_5970_e7f9_458f_15f0290099b1
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6["App.js"]
  b27c3f66_c90d_ed18_3ae4_582f9ff3b4e6 --> 317029de_e52e_edc1_0ba6_c44bc97613ff
  style 317029de_e52e_edc1_0ba6_c44bc97613ff fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

'use client';

import {useFormStatus} from 'react-dom';
import ErrorBoundary from './ErrorBoundary.js';

function ButtonDisabledWhilePending({action, children}) {
  const {pending} = useFormStatus();
  return (
    <button disabled={pending} formAction={action}>
      {children}
    </button>
  );
}

export default function Button({action, children}) {
  return (
    <ErrorBoundary>
      <form>
        <ButtonDisabledWhilePending action={action}>
          {children}
        </ButtonDisabledWhilePending>
      </form>
    </ErrorBoundary>
  );
}