个

5 个令人印象深刻的 React 组件

2025-06-07

5 个令人印象深刻的 React 组件

替代文本

在这个快速发展的互联网世界里，每天都有很多新鲜事物。也许你和我一样，想知道有没有什么捷径可以快速发现它们。

最近我收集了几个很有意思的 JavaScript 库，每个都特别有创意。也许你不必用到它们，但我敢说，当你把这些库添加到你的项目中时，它会让你的项目瞬间变得有吸引力。

替代文本

1.react-mouse-particles

react-mouse-particles是一个反应鼠标粒子效果的组件。

github https://github.com/lindelof/react-mouse-articles

一个非常有趣的 React 库，可以用来创建像流星或火球一样酷炫的鼠标粒子效果。我经常想用 React 做一些有趣的事情。使用这个组件，你的页面可能会瞬间变得绚丽多彩。

npm install --save react-mouse-particles
Enter fullscreen mode Exit fullscreen mode 
import React, { Component } from 'react'

import MouseParticles from 'react-mouse-particles'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <MouseParticles g={1} color="random" cull="col,image-wrapper"/>
      </>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

替代文本

2.particles-bg

particles-bg是一个 React 粒子动画背景组件。

github https://github.com/lindelof/articles-bg

如果你担心你的简历或个人资料不够醒目，那么它非常适合你。在页面上添加一些粒子动画，会让你的网站瞬间焕发光彩。非常棒

npm install --save particles-bg
Enter fullscreen mode Exit fullscreen mode 
import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

替代文本

3.react-parallax

用于视差效果的 React 组件。

github https://github.com/rrutsche/react-parallax

这是一个很棒的项目，它能让你轻松创建一个带有视差滚动的交互式网站。我想你肯定也想拥有自己的移动主页，那么这个项目非常适合你。

npm install --save react-parallax
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { Parallax, Background } from 'react-parallax';

const MyComponent = () => (
    <div>
        {/* -----basic config-----*/}
        <Parallax
            blur={10}
            bgImage={require('path/to/image.jpg')}
            bgImageAlt="the cat"
            strength={200}
        >
            Put some text content here - even an empty div with fixed dimensions to have a height
            for the parallax.
            <div style={{ height: '200px' }} />
        </Parallax>

        {/* -----dynamic blur-----*/}
        <Parallax
            blur={{ min: -15, max: 15 }}
            bgImage={require('path/to/another/image.jpg')}
            bgImageAlt="the dog"
            strength={-200}
        >
            Blur transition from min to max
            <div style={{ height: '200px' }} />
        </Parallax>
Enter fullscreen mode Exit fullscreen mode

4.react-shimmer

模拟闪光效果的 React Image Loader 组件。

github https://github.com/gokcan/react-shimmer

图片

一个功能强大、可定制的<img>组件，可在加载时模拟闪光效果。（零依赖！）目前与 React 兼容，但 RN 兼容性也正在开发中。

npm i react-shimmer
Enter fullscreen mode Exit fullscreen mode

替代文本

5.react-native-3dcube-navigation

出色的翻页效果

github https://github.com/zehfernandes/react-native-3dcube-navigation

如果你想用 React Native 做点什么，那么这个东西很不错，他可能适合你，翻页效果很棒。

npm i react-native-3dcube-navigation --save
Enter fullscreen mode Exit fullscreen mode 
import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationHorizontal ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Horizontal Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Horizontal Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Horizontal Page 3</Text>
    </View>
  </CubeNavigationHorizontal>
</View >
Enter fullscreen mode Exit fullscreen mode

替代文本

非常感谢你耐心读完这篇文章。如果你喜欢这些收藏品，我会继续收集更好的东西与你分享。祝你好梦。

文章来源：https://dev.to/lindelof/5-impressive-react-components-4clg
Devto 翻译
PREV
很棒的 CSS 输入和文本区域输入效果
NEXT
使用 CSS 属性选择器的高级样式