How to use @types/react - 8 common examples

import * as React from '@types/react';

class App<p> extends React.Component&lt;{}, IAppState&gt; {

    constructor(props: P, context: any) {
        super(props, context);

        // console.log("FIXME: ", styles.dec);

    }

    public render() {
        return (</p><div>
            <div></div>
            <div></div>
            <div></div>
        </div>);
    }

import * as React from '@types/react';
import {SyncBar, SyncBarProgress} from '../../js/ui/sync_bar/SyncBar';
import {IEventDispatcher, SimpleReactor} from '../../js/reactor/SimpleReactor';
import {Logger} from 'polar-shared/src/logger/Logger';
import {LogEventViewer} from './LogEventViewer';

const log = Logger.create();

class App<p> extends React.Component&lt;{}, IAppState&gt; {

    constructor(props: P, context: any) {
        super(props, context);

        this.toggleDropDown = this.toggleDropDown.bind(this);
        this.toggleSplit = this.toggleSplit.bind(this);
        this.state = {
            dropdownOpen: false,
            splitButtonOpen: false
        };
    }

    public render() {
        //
        // const options: ListOptionType[] = [
        //     {</p>

import * as React from '@types/react';
import {Button, DropdownItem, DropdownToggle, Input, InputGroup, InputGroupAddon, InputGroupButtonDropdown} from '@types/reactstrap';
import DropdownMenu from '@types/reactstrap/lib/DropdownMenu';
import Navbar from 'reactstrap/lib/Navbar';
import Popover from 'reactstrap/lib/Popover';
import PopoverHeader from '@types/reactstrap/lib/PopoverHeader';
import PopoverBody from 'reactstrap/lib/PopoverBody';
import ReactSummernote from '../../js/apps/card_creator/elements/schemaform/ReactSummernote';

class App<p> extends React.Component&lt;{}, IAppState&gt; {

    constructor(props: any) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            popoverOpen: false
        };
    }

    public toggle() {

        if (! this.state.popoverOpen) {
            // this is a bit of a hack to position it exactly where we want it.
            document.getElementById('annotationbar-anchor')!.style.cssText
                = 'position: relative; top: 300px; left: 300px;';</p>

import * as React from '@types/react';
import {Button, Input, InputGroup, InputGroupAddon} from '@types/reactstrap';
import Navbar from 'reactstrap/lib/Navbar';
import {BrowserConfigurationInputGroup} from './BrowserConfigurationInputGroup';
import {CaptureButton} from './CaptureButton';

class BrowserNavBar extends React.Component {

    constructor(props: any, context: any) {
        super(props, context);
    }

    public render() {
        return (

            <div>

                

                    

                        </div>

import React from '@types/react';
import {DropdownItem, DropdownMenu, DropdownToggle, InputGroupButtonDropdown} from '@types/reactstrap';

export class BrowserConfigurationInputGroup extends React.Component {

    constructor(props: any) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            open: false
        };
    }

    public render() {
        return (

import * as React from '@types/react';
import {Button, InputGroupAddon} from '@types/reactstrap';

export class CaptureButton extends React.Component {

    constructor(props: any, context: any) {
        super(props, context);
    }

    public render() {
        return (

            

                <button disabled="" aria-label="" title="Capture the HTML page and save locally" type="button">
</button>

import * as React from '@types/react';
import {LogEventComponent} from './LogEventComponent';
import {IEventDispatcher} from '../../js/reactor/SimpleReactor';
import {SyncBarProgress} from '../../js/ui/sync_bar/SyncBar';

export class LogEventViewer extends React.Component {

    private sequence: number = 0;

    constructor(props: IProps, context: any) {
        super(props, context);

        this.state = {
            rendered: []
        };

    }

    public componentDidMount(): void {

        this.props.progress.addEventListener(syncBarProgress => {

import * as React from '@types/react';
import {LogEvent} from './LogEventViewer';
import {ListGroupItem} from '@types/reactstrap';

export class LogEventComponent extends React.Component {

    constructor(props: IProps, context: any) {
        super(props, context);
    }

    public render() {

        return (

            {this.props.logEvent.message}

        );

    }

}