I'm building some ponents with React.FC typescript and today I found this typescript error when trying to inject styled-ponent props using withTheme HOC from styled-ponents:

It seems that withTheme HOC only accepts React.ComponentType as parameter, but ponent was build using React.FC (Functional Component).

Is there a way to cast React.FC to React.ComponentType?

UPDATE

The full ponent implementation:

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Reset, LoadingBarStyled, SpinnerContainer } from './Style'
import { withTheme } from 'styled-ponents'
import ScaleLoader from 'react-spinners/ScaleLoader'

export interface ILoadingBarComponent {
    progress: number
    appearance?: string
    onFinish(finished: Promise<string>): void
}

const LoadingBarComponent: React.FC<ILoadingBarComponent> = ({
    progress = 0,
    appearance = 'default',
    onFinish
}) => {
    useEffect(() => {
        if (progress >= 100 && onFinish) {
            onFinish(
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('finished')
                    }, 800)
                })
            )
        }
    }, [progress, onFinish])
    return (
        <div className="loading-bar-ponent-module">
            <Reset />
            {progress > -1 && progress < 101 && (
                <>
                    <LoadingBarStyled progress={progress} appearance={appearance} />
                    <SpinnerContainer progress={progress}>
                        <ScaleLoader height={10} />
                    </SpinnerContainer>
                </>
            )}
        </div>
    )
}

LoadingBarComponent.propTypes = {
    progress: PropTypes.number.isRequired,
    appearance: PropTypes.string,
    onFinish: PropTypes.func.isRequired
}
export default withTheme(LoadingBarComponent)

I'm building some ponents with React.FC typescript and today I found this typescript error when trying to inject styled-ponent props using withTheme HOC from styled-ponents:

It seems that withTheme HOC only accepts React.ComponentType as parameter, but ponent was build using React.FC (Functional Component).

Is there a way to cast React.FC to React.ComponentType?

UPDATE

The full ponent implementation:

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Reset, LoadingBarStyled, SpinnerContainer } from './Style'
import { withTheme } from 'styled-ponents'
import ScaleLoader from 'react-spinners/ScaleLoader'

export interface ILoadingBarComponent {
    progress: number
    appearance?: string
    onFinish(finished: Promise<string>): void
}

const LoadingBarComponent: React.FC<ILoadingBarComponent> = ({
    progress = 0,
    appearance = 'default',
    onFinish
}) => {
    useEffect(() => {
        if (progress >= 100 && onFinish) {
            onFinish(
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('finished')
                    }, 800)
                })
            )
        }
    }, [progress, onFinish])
    return (
        <div className="loading-bar-ponent-module">
            <Reset />
            {progress > -1 && progress < 101 && (
                <>
                    <LoadingBarStyled progress={progress} appearance={appearance} />
                    <SpinnerContainer progress={progress}>
                        <ScaleLoader height={10} />
                    </SpinnerContainer>
                </>
            )}
        </div>
    )
}

LoadingBarComponent.propTypes = {
    progress: PropTypes.number.isRequired,
    appearance: PropTypes.string,
    onFinish: PropTypes.func.isRequired
}
export default withTheme(LoadingBarComponent)

• javascript
• reactjs
• typescript
• casting
• styled-ponents

• Can you share the code of your ponent? – Hamza El Aoutar Commented Oct 24, 2019 at 13:27

1 Answer 1

You need to add a theme prop to your ponent props interface:

interface Theme {}

export interface ILoadingBarComponent {
  progress: number
  appearance?: string
  onFinish(finished: Promise<string>): void
  theme: Theme
}