5 impressive react components
Tags: react, javascript, css
Published: 2020-07-26 11:04:59

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cy3nao1iv4fvn0gkbnwf.jpeg)

In this fast-growing Internet world, there are many new things every day. Maybe you, like me, are wondering if there are any shortcuts to discover them quickly.

I have recently collected several interesting javascript libraries, each of which is particularly creative. Maybe you don't have to use them, but I dare say that when you add these libraries to your project, it will instantly make your project attractive.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/timimnnqcv68k43ahfiu.jpeg)


## 1. `react-mouse-particles`

>`react-mouse-particles` is a react mouse particle effect component.

### github [https://github.com/lindelof/react-mouse-particles](https://github.com/lindelof/react-mouse-particles)

A very fun react library that can be used to create mouse particle effects, which are as cool as meteors or fireballs. I often want to use react to do something fun. Using this component may make your page instantly glorious.

```shell
npm install --save react-mouse-particles
```

```jsx
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"/>
      </>
    )
  }
}
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ih748m663sniywdntdfl.gif)

---

## 2. `particles-bg`

>`particles-bg` is a React particles animation background component. 

### github [https://github.com/lindelof/particles-bg](https://github.com/lindelof/particles-bg)

If you're worrying about your CV or profile not being noticeable, then it's perfect for you. Adding some particle animation to the page will make your website sparkle instantly. Very amazing

```shell
npm install --save particles-bg
```

```jsx
import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6e23vd4urpl0yp804d5p.jpg)

---

## 3. `react-parallax`

> A React Component for parallax effect.

### github [https://github.com/rrutsche/react-parallax](https://github.com/rrutsche/react-parallax)

This is a great project that allows you to easily create an interactive website with parallax scrolling. I think you definitely want to have your own mobile homepage, then it is perfect for you.

```shell
npm install --save react-parallax
```

```jsx
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>
```

---

## 4. `react-shimmer`

> React Image Loader component that simulates a shimmer effect.

### github [https://github.com/gokcan/react-shimmer](https://github.com/gokcan/react-shimmer)

![img](https://github.com/gokcan/react-shimmer/blob/master/media/logo.png?raw=true)

A powerful, customisable, `<img>` component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way.

```shell
npm i react-shimmer
```

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/smc55txhlmxb8l8vs8yh.png)


---

## 5. `react-native-3dcube-navigation`

> a great page turning effect

### github [https://github.com/zehfernandes/react-native-3dcube-navigation](https://github.com/zehfernandes/react-native-3dcube-navigation)

If you want to do something with react native. Then this thing is very good, he may be suitable for you, a great page turning effect.


```shell
npm i react-native-3dcube-navigation --save
```

```jsx
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 >
```

![Alt Text](https://github.com/zehfernandes/react-native-3dcube-navigation/raw/master/imgs/demo.gif)


Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.