Wrong prop type for ratio (React)

[marcosmesser]

https://github.com/TwicPics/components/blob/46017d84963b08a88e5171ff202526b97b9ca80d/src/react/img-video.tsx#L97

Should be:

   "ratio": PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),

This causes annoying warnings, even though the parser can handle number as prop:

Warning: Failed prop type: Invalid prop ratio of type number supplied to n, expected string.

[mbgspcii]

Hi @marcosmesser .

Thank you for opening this issue.

There actually seems to be an issue with our definition of the type ratio.

This problem should be fixed with the very next version of the components.

Thanks again.

Regards.

Miguel

[marcosmesser]

Hi @mbgspcii ,

There is some confusion between TypeScript type and the docs.

Can you clarify which will be the definitive approach?

[mbgspcii]

Hi @marcosmesser

You are right, the documentation is not clear enough (we will modify it).

Meanwhile, in the current version of the Twic Components, the value to pass to the React component for the ratio property must be a string. It can be written as 16/9 or 16:9 or 1.78 as in:

<TwicImg src="yourImage.jpg" ratio="16/9"></TwicImg> or <TwicImg src="yourImage.jpg" ratio="16:9"></TwicImg> or <TwicImg src="yourImage.jpg" ratio="1.78"></TwicImg>

In the next version, you will be able to pass as value to the ratioproperty a string (as existing) or a number like 1.78, as in:

<TwicImg src="yourImage.jpg" ratio={1.78}></TwicImg>

I hope I answered your question, while waiting for the new version (very soon) which will allow you to pass a value as a number.

Thank you again for your valuable feedback.

Regards.

Miguel.

[marcosmesser]

@mbgspcii passing the number already works 😉

It is just that the misaligned types between

https://github.com/TwicPics/components/blob/46017d84963b08a88e5171ff202526b97b9ca80d/src/react/img-video.tsx#L97

and

https://github.com/TwicPics/components/blob/46017d84963b08a88e5171ff202526b97b9ca80d/src/react/img-video.tsx#L126

causes console warnings.