mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import * as React from 'react';
|
|
import * as ReactDOM from 'react-dom';
|
|
import * as ReactIs from 'react-is';
|
|
|
|
// Below is taken from README of react-is
|
|
// Determining if a Component is Valid
|
|
|
|
interface CompProps {
|
|
forwardedRef: React.Ref<any>;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
class ClassComponent extends React.Component<CompProps> {
|
|
render() {
|
|
return React.createElement('div');
|
|
}
|
|
}
|
|
|
|
const StatelessComponent = () => React.createElement('div');
|
|
|
|
const ForwardRefComponent = React.forwardRef((props, ref) =>
|
|
React.createElement(ClassComponent, { forwardedRef: ref, ...props })
|
|
);
|
|
|
|
const LazyComponent = React.lazy(() =>
|
|
Promise.resolve({ default: ForwardRefComponent })
|
|
);
|
|
|
|
const MemoComponent = React.memo(StatelessComponent);
|
|
|
|
const Context = React.createContext(false);
|
|
|
|
ReactIs.isValidElementType('div'); // true
|
|
ReactIs.isValidElementType(ClassComponent); // true
|
|
ReactIs.isValidElementType(StatelessComponent); // true
|
|
ReactIs.isValidElementType(ForwardRefComponent); // true
|
|
ReactIs.isValidElementType(Context.Provider); // true
|
|
ReactIs.isValidElementType(Context.Consumer); // true
|
|
ReactIs.isValidElementType(React.createFactory('div')); // true
|
|
ReactIs.isValidElementType(LazyComponent);
|
|
ReactIs.isValidElementType(MemoComponent);
|
|
|
|
// Determining an Element's Type
|
|
|
|
// AsyncMode - unstable_AsyncMode is not implemented in @types/react yet
|
|
// ReactIs.isAsyncMode(<React.unstable_AsyncMode />); // true
|
|
// ReactIs.typeOf(<React.unstable_AsyncMode />) === ReactIs.AsyncMode; // true
|
|
|
|
// Context
|
|
const ThemeContext = React.createContext('blue');
|
|
|
|
ReactIs.isContextConsumer(<ThemeContext.Consumer children={StatelessComponent} />); // true
|
|
ReactIs.isContextProvider(<ThemeContext.Provider children={StatelessComponent} value='black' />); // true
|
|
ReactIs.typeOf(<ThemeContext.Consumer children={StatelessComponent} />) === ReactIs.ContextConsumer; // true
|
|
ReactIs.typeOf(<ThemeContext.Provider children={StatelessComponent} value='black' />) === ReactIs.ContextProvider; // true
|
|
|
|
// Element
|
|
ReactIs.isElement(<div />); // true
|
|
ReactIs.typeOf(<div />) === ReactIs.Element; // true
|
|
|
|
// Fragment
|
|
ReactIs.isFragment(<></>); // true
|
|
ReactIs.typeOf(<></>) === ReactIs.Fragment; // true
|
|
|
|
// Portal
|
|
const div = document.createElement('div');
|
|
const portal = ReactDOM.createPortal(<div />, div);
|
|
|
|
ReactIs.isPortal(portal); // true
|
|
ReactIs.typeOf(portal) === ReactIs.Portal; // true
|
|
|
|
// StrictMode
|
|
ReactIs.isStrictMode(<React.StrictMode />); // true
|
|
ReactIs.typeOf(<React.StrictMode />) === ReactIs.StrictMode; // true
|
|
|
|
// Verify typeOf accepts any type of value (taken from tests of react-is)
|
|
ReactIs.typeOf('abc') === undefined;
|
|
ReactIs.typeOf(true) === undefined;
|
|
ReactIs.typeOf(123) === undefined;
|
|
ReactIs.typeOf({}) === undefined;
|
|
ReactIs.typeOf(null) === undefined;
|
|
ReactIs.typeOf(undefined) === undefined;
|
|
|
|
// ForwardRef
|
|
ReactIs.isForwardRef(<ForwardRefComponent />); // true
|
|
ReactIs.typeOf(<ForwardRefComponent />) === ReactIs.ForwardRef; // true
|
|
|
|
// Lazy
|
|
ReactIs.isLazy(LazyComponent); // true
|
|
ReactIs.typeOf(LazyComponent) === ReactIs.Lazy; // true
|
|
|
|
// Memo
|
|
ReactIs.isMemo(MemoComponent); // true
|
|
ReactIs.typeOf(MemoComponent) === ReactIs.Memo; // true
|
|
|
|
// Suspense
|
|
ReactIs.isForwardRef(<React.Suspense fallback={StatelessComponent} />); // true
|
|
ReactIs.typeOf(<React.Suspense fallback={StatelessComponent} />) === ReactIs.Suspense; // true
|