react Component TypeScript Examples

Source File: InputString.tsx From hive with MIT License

6 votes

class InputString extends Component<Props> {
    change = (e: ChangeEvent<HTMLInputElement>) => {
        const { value, config } = this.props;

        config.changeValue(value.value_id, e.target.value);
    };

    render() {
        const { value } = this.props;

        return (
            <InputCore value={value}>
                <InputGroup
                    id={value.value_id}
                    placeholder={value.label}
                    onChange={this.change}
                    value={value.value as string}
                />
            </InputCore>
        );
    }
}

Source File: EditableComponent.tsx From aem-react-editable-components with Apache License 2.0

6 votes

/**
 * Returns a component wrapper that provides editing capabilities to the component.
 *
 * @param WrappedComponent
 * @param editConfig
 */
export function withEditable<P extends MappedComponentProperties>(WrappedComponent: ComponentType<P>, editConfig?: EditConfig<P>) {

    const defaultEditConfig: EditConfig<P> = editConfig ? editConfig : { isEmpty: (props: P) => false };

    return class CompositeEditableComponent extends Component<P> {
        public render(): JSX.Element {
            type TypeToUse = EditableComponentProperties<P> & P;

            const computedProps: TypeToUse = {
                ...this.props,
                componentProperties: this.props,
                editConfig: defaultEditConfig,
                wrappedComponent: WrappedComponent
            };

            return <EditableComponent {...computedProps} />;
        }
    };
}

Source File: index.tsx From Figurify with Apache License 2.0

6 votes

export default class Home extends Component<{}, ChartProp> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Head>
                    <title>{NAME}</title>
                </Head>
                <Nav/>
                <HomePage/>
            </div>
        );
    }
}

Source File: Options.tsx From RPG-Inventory-UI with GNU General Public License v3.0

6 votes

@observer
class Options extends Component<any, any> {
    constructor(props) {
        super(props)
        this.state = {
            amount : 1
        }

        this.onAmountChange = this.onAmountChange.bind(this);
    }

    componentDidMount() {
        dragStore.amount = this.state.amount
    }

    onAmountChange(e) {
        this.setState({ amount : e.target.value })
        dragStore.amount = e.target.value
    }

    render() {
        const { t } = this.props;

        return (
            <div className="inventory-options">
                <div className="option-panel">
                    <input type="text" className="option-button" value={this.state.amount} onChange={this.onAmountChange} tabIndex={-1}/>
                    <OptionButton name={t("Utiliser")} drop="yes" eventName="useInventory" />
                    <OptionButton name={t("Donner")} drop="yes" eventName="giveInventory" />
                    <OptionButton name={t("Jeter")} drop="yes" eventName="throwInventory" />
                    <OptionButton name={t("Informations")} drop="yes" eventName="infoInventory" />
                    <OptionButton name={t("Renommer")} eventName="renameInventory" />
                </div>
            </div>
        )
    }
}

Source File: index.tsx From hive with MIT License

6 votes

class Dashboard extends Component<Props> {
    render() {
        return (
            <div className={styles.wrap}>
                <Dots />
                <div className={styles.pagesWrap}>
                    <Pages />
                </div>
            </div>
        );
    }
}

Source File: ErrorBoundary.tsx From anchor-web-app with Apache License 2.0

6 votes

export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    this.setState({
      error,
    });

    console.error(errorInfo);
  }

  render() {
    if (this.state.error) {
      return <ErrorView>{this.state.error.toString()}</ErrorView>;
    }

    return this.props.children;
  }
}

Source File: Example.tsx From jmix-frontend with Apache License 2.0

6 votes

@observer
export class Example extends Component {

  render() {
    return (
      <Text style={styles.title}>Welcome to <%=project.name%>!</Text>
    );
  }
}

Source File: index.tsx From space-traveling with MIT License

6 votes

export default class Comments extends Component {
  componentDidMount() {
    const script = document.createElement('script');
    const anchor = document.getElementById('inject-comments-for-uterances');
    script.setAttribute('src', 'https://utteranc.es/client.js');
    script.setAttribute('crossorigin', 'anonymous');
    script.setAttribute('async', 'true');
    script.setAttribute('repo', 'GBDev13/space-traveling');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'dark-blue');
    anchor.appendChild(script);
  }

  render() {
    return (
      <div
        id="inject-comments-for-uterances"
        style={{ marginBottom: '4rem' }}
      />
    );
  }
}

Source File: SettingsTab.d.ts From react-native-sdk with MIT License

6 votes

declare class SettingsTab extends Component<Props, State> {
    constructor(props: Props);
    render(): JSX.Element;
    private renderLoggedIn;
    private renderLoggedOut;
    private onLoginTapped;
    private onLogoutTapped;
    private updateState;
}

Source File: BaseContainer.tsx From generator-earth with MIT License

6 votes

/**
 * 普通container的基类
 * 已包装所在路由的前缀
 */
export default class BaseContainer<P={}, S={}> extends Component<P & RouteComponentProps, S> {
    
    static contextType = BaseContext
    
    /**
     * 可以使用  this.context.CONTAINER_ROUTE_PREFIX 获取 routeContainerHOC提供的路径前缀
     * 如
    instanceMethod() {
        console.log(this.context.CONTAINER_ROUTE_PREFIX)
    }
     */
    
    sleep(n=0) {
        return new Promise(resolve=>{
            setTimeout( ()=>resolve(), n )
        })
    }
}

Source File: Startup.tsx From hive with MIT License

6 votes

class Startup extends Component<Props> {
    componentDidMount() {
        const { authService } = this.props;

        authService.loginLan();
    }

    render() {
        const { initialized } = this.props;

        if (!initialized) return null;

        return (
            <Router>
                <Switch>
                    <Redirect exact from={constants.paths.base} to={constants.paths.dashboard} />
                    <AnonymousRoute path={constants.paths.login} component={LoginComp} />
                    <AuthorizedRoute path={constants.paths.base} component={AuthorizedComp} />
                </Switch>
            </Router>
        );
    }
}

Source File: index.tsx From pola-web with MIT License

6 votes

class ClickOutsideComponent extends Component<IClickOutsideComponentProps> {
  handleClickOutside = (evt: FormEvent) => {
    this.props.clickOutsideHandler && this.props.clickOutsideHandler();
  };

  public render() {
    return <div className="click-outside">{this.props.children}</div>;
  }
}

Source File: Title.tsx From sc2-planner with MIT License

6 votes

export default class Title extends Component {
    render(): JSX.Element {
        return (
            <div>
                <div>
                    <a
                        className={CLASSES.title}
                        href="https://burnysc2.github.io/sc2-planner/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        SC2-Planner - The StarCraft II Build Planner
                    </a>
                </div>
                <div>
                    <a
                        className={CLASSES.titleVersion}
                        href="https://liquipedia.net/starcraft2/Patch_5.0.9"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        For patch 5.0.9
                    </a>
                </div>
            </div>
        )
    }
}

Source File: Checkout.tsx From tutorial-cloudflare-bookstore with Apache License 2.0

6 votes

export default class Checkout extends Component {
  render() {
    return (
      <div>
        <CategoryNavBar />
        <div className="well-bs">
          <div className="white-box no-margin-top no-margin-bottom">
            <h3>Checkout</h3>
          </div>
        </div>
        <CheckoutForm />
      </div>
    );
  }
}

Source File: ErrorMessage.tsx From sc2-planner with MIT License

6 votes

export default class ErrorMessage extends Component<MyProps> {
    render(): JSX.Element {
        return (
            <div>
                <label className={CLASSES.errorLabel}>{this.props.gamelogic.errorMessage}</label>
            </div>
        )
    }
}

Source File: SearchView.tsx From tutorial-cloudflare-bookstore with Apache License 2.0

6 votes

export default class SearchView extends Component<SearchViewProps> {
  render() {
    return (
      <div className="Category">
        <CategoryNavBar />
        <SearchGallery match={this.props.match} />
      </div>
    );
  }
}

Source File: index.tsx From metaflow-ui with Apache License 2.0

6 votes

//
// Basic error boundary. Used in multiple parts of app
//

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
  };

  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Uncaught error:', error, errorInfo);
    this.setState({ hasError: true });
    const warning = `${error.name}: ${error.message}, ${errorInfo.componentStack?.split('\n')[1]}`;
    console.log(warning);
  }

  public render(): React.ReactNode {
    if (this.state.hasError) {
      return <p>{this.props.message}</p>;
    }

    return this.props.children;
  }
}

Source File: ErrorBoundary.tsx From firebase-react-typescript-project-template with MIT License

6 votes

export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): ErrorBoundaryState {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render(): ReactElement {
    if (this.state.hasError) {
      return <div />;
    }
    return this.props.children;
  }
}

Source File: ErrorBoundary.tsx From hypertext with GNU General Public License v3.0

6 votes

export default class ErrorBoundary extends Component<{ fallback: ReactNode; children: ReactNode }> {
  state = { hasError: false, error: null }
  static getDerivedStateFromError(error: Error): { hasError: boolean; error: Error } {
    return {
      hasError: true,
      error,
    }
  }
  render(): ReactNode {
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}

react#Component TypeScript Examples