react-shimmer-effect icon indicating copy to clipboard operation
react-shimmer-effect copied to clipboard

Usage with Typescript

Open ZkHaider opened this issue 5 years ago • 0 comments

Hi there I'm a native mobile engineer (iOS / Android), so forgive me if the question is a little noob, but how would I use this library with Typescript?

I am having a hard time configuring it to work Typescript due to compile time issues:

import React, {FunctionComponent, Fragment} from "react";
import classNames from 'classnames';
import injectSheet from 'react-jss';
import styles from "./Shimmer.Style";

export interface ShimmerProps {
    classes
}

export const Shimmer: FunctionComponent<ShimmerProps> = (
    props
) => {

    let modifiedChildren: any[] = [];
    React.Children.map(props.children, (
        (child, index) => {
            const { classes } = props.classes;
            const castedChild = (child as any);
            const clonedElement = React.cloneElement(
                castedChild.props,
                {
                    className: classNames(castedChild.props.className, classes.shimmer)
                }
            );
            modifiedChildren.push(clonedElement);
        }
    ));

    return (
        <Fragment>
            {modifiedChildren}
        </Fragment>
    )
};

export default injectSheet(styles)(Shimmer)

In order to use it I needed to define a ShimmerProps interface definition, however this now forces me to pass classes into the component:

<Shimmer classes={/** What to put here? **/} />

ZkHaider avatar Apr 06 '20 21:04 ZkHaider