transition-hook icon indicating copy to clipboard operation
transition-hook copied to clipboard

useListTransition 初始化key

Open muyeyong opened this issue 2 years ago • 6 comments

如果像这样使用useListTransition(list, **300) const keyRef = useRef(0); // change list to our list form with extra information. const initialList: Array<ItemWithState<Item>> = list.map((item, key) => ({ item, key: keyRef.current, stage: 'enter', })); 会导致key重复

muyeyong avatar Apr 21 '22 14:04 muyeyong

Thank you. The useListTransition api hasn't been officially released, but it's apparently exists in the library, it's still in designing progress and will come with transition-hook v2, stay tuned~

iamyoki avatar Apr 22 '22 00:04 iamyoki

@iamyoki I was looking for an example image slider or carousel using your lib. So far I could not manage to produce something usable.

Imfahrenheit avatar May 23 '22 08:05 Imfahrenheit

@Imfahrenheit Could you produce a codesandbox example of your carousel? I would complete it for you.

iamyoki avatar May 23 '22 09:05 iamyoki

@iamyoki Thanks for the prompt response! I quickly created a codesandbox for you to give me some pointers. The carousel should slide left or right based on prev or next direction.

Imfahrenheit avatar May 23 '22 13:05 Imfahrenheit

@Imfahrenheit Take a look https://codesandbox.io/s/transition-hook-experiement-complete-boo32y?file=/src/Slider.tsx

iamyoki avatar May 23 '22 15:05 iamyoki

@Imfahrenheit Take a look https://codesandbox.io/s/transition-hook-experiement-complete-boo32y?file=/src/Slider.tsx

perfect! Thanks a lot, now I don't need to use react-transition-group for this.

Imfahrenheit avatar May 23 '22 15:05 Imfahrenheit