pmndrs/react-spring

최근 기록된 소스 활동: 2026년 5월 21일 15:38

SkillsMP 카탈로그 업데이트: 2026년 11월 12일 12:52

수집된 skills: 14

GitHub 스타: 29,273
GitHub 포크: 1,237

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/pmndrs/react-spring.

저장소 README

README 원본 파일: README.md

README 원본 보기

README 전체 펼치기

<p align="center"> <img src="https://i.imgur.com/QZownhg.png" width="240" /> </p> <br /> <h1 align="center">react-spring</h1> <h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3> <br> <p align="center"> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/v/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank"> <img src="https://img.shields.io/npm/dm/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://discord.gg/AXfNsGx64f" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord"> </a> </p> <br> `react-spring` is a cross-platform spring-physics first animation library. It's as simple as: ```jsx const styles = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } }) <animated.div style={styles} /> ``` Just a small bit about us: - **Cross-Platform**: We support `react-dom` and `react-three-fiber`. - **Versatile**: Be declarative with your animations or if you prefer, imperative. - **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well. There's a lot more to be had! Give it a try and find out. ## Getting Started ### ⚡️ Jump Start ```shell # Install the target you need npm install @react-spring/web # or, for react-three-fiber npm install @react-spring/three ``` ```jsx import { animated, useSpring } from '@react-spring/web' const FadeIn = ({ isVisible, children }) => { const styles = useSpring({ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 24, }) return <animated.div style={styles}>{children}</animated.div> } ``` It's as simple as that to create scroll-in animations when value of `isVisible` is toggled. ### 📖 Documentation and Examples More documentation on the project can be found [here](https://www.react-spring.dev). Pages contain their own [examples](https://react-spring.dev/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view! --- ## 📣 What others say <p align="middle"> <img src="assets/testimonies.jpg" /> </p> ## Used by <p align="middle"> <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a> <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a> <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a> </p> And [many others...](https://github.com/pmndrs/react-spring/network/dependents) ## Backers Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/pmndrs). <a href="https://opencollective.com/pmndrs#backers" target="_blank"> <img src="https://opencollective.com/pmndrs/backers.svg?width=890"/> </a> ## Contributors This project exists thanks to all the people who contribute. <a href="https://github.com/react-spring/react-spring/graphs/contributors"> <img src="https://opencollective.com/pmndrs/contributors.svg?width=890" /> </a>

저장소 README를 불러오는 중…

이 저장소의 skills

소프트웨어 개발자

직업 카테고리 1개 · 100% 분류됨

소프트웨어 개발자

Validate current branch follows feature branch naming conventions

원문 언어: 영어

2026-05-21

수집된 skill 14개 중 14개를 표시합니다.