Skip to main content

Joel M. Turner

Helpful React Types

Hooks

1// add type before parens
2React.useState<boolean>(false)
3React.useRef<HTMLDivElement>(null)
4React.useCallback(
5 function() {
6 if (theMoon) {
7 setSomethingAwesome()
8 }
9 },
10 [theMoon]
11)

Props

1type FooProps = {
2 children: React.ReactNode
3}

Components

1// functional
2const Foo: React.FC<FooProps> = (props) => ()
3// class
4class Foo extends React.Component<FooProps> {}

emotion

1const Foo = styled<FooProps>.div``;

© 2012-2020, Proudly built with Gatsby and Theme UI