any-examples.tsx

// rendering a plain div
<Any />; // -> <div />

// using props defined on a div
<Any style={{ color: 'red' }} />; // -> <div style={{ color: 'red' }} />

// Declaring a new Input type
const Input = Any.ofType<'input'>();

// Failure to pass literal 'input' to is will be a type failure
<Input is="input" />;

// You can also now include input specific props. Including 'type' and 'value'
// would be a type failure with the div.
<Input is="input" type="text" value="text value" />;

// Using components

type BoxProps = {
  color: string;
};

const StatelessBox: SFC<BoxProps> = ({ color }) => <div style={{ color }} />;
  
// When using `ofType` with functional components you need to use `typeof`.
const AnyStatelessBox = Any.ofType<typeof StatelessBox>();

// Failure to include both `StatelessBox` and `color` is a type error now.
<AnyStatelessBox is={StatelessBox} color="red" />;

class Box extends Component<BoxProps> {
  public render() {
    const { color } = this.props;
    return <div style={{ color }} />;
  }
}

// Testing with class components.
// Note that `typeof` is no longer required here.
const AnyBox = Any.ofType<Box>();

<AnyBox is={Box} color="red" />;