{"type":"rich","width":"100%","categories":["Programming","React","TypeScript"],"blog_url":"https://c4se.hatenablog.com/","title":"react-swipeable \u3068 react-transition-group \u3067 swipe animation","author_name":"Kureduki_Maari","version":"1.0","description":"\u4ee5\u4e0b\u306e\u304a\u3082\u3061\u3083 React component \u304c\u6709\u3063\u3066\u3001\u53f3\u306b swipe \u3057\u305f\u3089\u53f3\u306b fade out\u3001\u5de6\u306b swipe \u3057\u305f\u3089\u5de6\u306b fade out \u3057\u305f\u3044\u3068\u3057\u3088\u3046\u3002 import React, { useState } from \"react\"; const items = [ {id: 1, content: \"item 1\"}, {id: 2, content: \"item 2\"}, ]; export function Example() { const [currentItemId, setCurrentItemId] = useState(1); const currentIt\u2026","height":"190","provider_url":"https://hatena.blog","author_url":"https://blog.hatena.ne.jp/Kureduki_Maari/","image_url":null,"blog_title":"c4se\u8a18\uff1a\u3055\u3063\u3061\u3083\u3093\u3067\u3059\u3088\u2606","published":"2021-08-15 22:43:58","url":"https://c4se.hatenablog.com/entry/2021/08/15/224358","html":"<iframe src=\"https://hatenablog-parts.com/embed?url=https%3A%2F%2Fc4se.hatenablog.com%2Fentry%2F2021%2F08%2F15%2F224358\" title=\"react-swipeable \u3068 react-transition-group \u3067 swipe animation - c4se\u8a18\uff1a\u3055\u3063\u3061\u3083\u3093\u3067\u3059\u3088\u2606\" class=\"embed-card embed-blogcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"></iframe>","provider_name":"Hatena Blog"}