Open jordanlambrecht opened 2 years ago
why does animationdata need to be null? undefined is an accepted value too
That would work too. Typescript just needs an initial value to not get angry
if the typescript definition problem lies in react-lottie-player, then I'm happy to accept a PR to fix the definitions
No need for a PR even. Just the example listed in the README needs 'undefined' or 'null' added to the useState.
ah, but what I meant is that undefined should also be acceptable, so I don't think we should force users to use null
. Probably the error you're getting is due to something wrong with our type script definitions file and should be solved there instead: https://github.com/mifi/react-lottie-player/blob/master/src/index.d.ts
although i'm not an expert in TS
I guess since there are no typedefinitions
available for the react-lottie-player
package . It is better to assign the type for animationData
as any . As shown below
const MyComponent = () => {
const [animationData, setAnimationData] = useState<any>();
useEffect(() => {
import('./animation.json').then(setAnimationData);
}, []);
if (!animationData) return <div>Loading...</div>;
return <Lottie animationData={animationData} />;
}
Small thing, but typescript will throw an error on the following line:
const [animationData, setAnimationData] = useState();
simple solution is to add a null to the initial useState:
const [animationData, setAnimationData] = useState(null);
Can you please post a screenshot of warning .
I suppose typescript should show warning as long as you don't use any
. Since neither undefined
and Module
have compatible types not null
and Module
Knowing that we are going to have JSON object as our state, it would probably be best to simply use object
instead of any
. I know a lot of people don't allow the use of any
in their codebases. (or at least are VERY strict on it)
const MyComponent = () => {
const [animationData, setAnimationData] = useState<object>();
useEffect(() => {
import('./animation.json').then(setAnimationData);
}, []);
if (!animationData) return <div>Loading...</div>;
return <Lottie animationData={animationData} />;
}
Small thing, but typescript will throw an error on the following line:
const [animationData, setAnimationData] = useState();
simple solution is to add a null to the initial useState:
const [animationData, setAnimationData] = useState(null);