TypeScript

Components-extra requires a minimum version of TypeScript@3.8.

Since v3.0.0, the library fully supports TypeScript.

All the components export their Props interface and their Types. That means you can fully take leverage of their typings system, and extend them in your own project, and integrate them in other components.

Every component is exported as a styled-component and forward the ref you attach to it to the root HTML element it renders. You can learn more about react and the refs on nocode nobug's article.

All the types & interfaces can be imported from the index root, just like the components are.

Requirements

You may need to install the following types:

@types/styled-components

Then, add them in your tsconfig.json file:

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "styled-components",
      "@material-ui/core"
    ]
  },
}

Your TypeScript compiler and IDE should now be able to understand the whole typing system of components-extra. If it is not the case, please do not hesitate to open an issue, or make a PR if you think it's something that can be fixed on the lib side.

If you want a full support of the types in your IDE, you can also create a styled.d.ts with the following content:

// styled.d.ts
import {} from 'styled-components'
import { Theme } from 'components-extra'

export interface StyledCompoProps {
  theme: Theme
}

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

This will allow your IDE to provide you with auto-completion in your styled-components when using the theme.

Example

Say, for example, that you're working with the CookiesBanner component. You can make a new component on top of it using TypeScript this way:

import React from 'react'
import { CookiesBanner, CookiesBannerProps } from 'components-extra'

interface ExtendedCookiesBannerProps extends CookiesBannerProps {
  caption: string
}

const ExtendedCookiesBanner: React.FC<ExtendedCookiesBannerProps> = ({ caption, ...rest }) => {

  return (
    <div>
      <CookiesBanner {...rest} />
      <span>{caption}</span>
    </div>
  )
}

Your ExtendedCookiesBanner will inherit from all the props of CookiesBanner, plus the one you defined (here caption).

What about prop-types ?

In addition to the TypeScript typings, all the components are also declaring their props using PropTypes. Doing so, you will have both type checking at compilation time (Nodejs - TypeScript) and execution time (Browser - PropTypes).

Since TypeScript's integration in React is "relatively" recent, some changes are to be expected, and you should take into account the fact that this library is not in its mature state yet using TypeScript. Do not hesitate to open issues or PRs if you encounter any issue using TypeScript with components-extra.

TypeScript

Requirements

Example

Further reading

What about prop-types ?