loading...
Cover image for 6 very interesting and creative javascript libraries

6 very interesting and creative javascript libraries

lindelof profile image lindelof ・3 min read

Alt Text

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

1. react-mouse-particles

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

github 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.

npm install --save react-mouse-particles
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


2. particles-bg

particles-bg is a React particles animation background component.

github 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

npm install --save particles-bg
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


3. particles-bg-vue

particles-bg-vue is A vue.js particles animation background component.

github https://github.com/lindelof/particles-bg-vue

If you really like the effect above, but it happens that the framework you are using is vue.js. Then don't worry, using this library can also meet your needs.

npm install --save particles-bg-vue
<particles-bg type="lines" :bg="true" />
...

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {
    ParticlesBg
  }
};

Alt Text


4. react-parallax

A React Component for parallax effect.

github 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.

npm install --save react-parallax
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>

5. react-shimmer

React Image Loader component that simulates a shimmer effect.

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

img

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.

npm i react-shimmer

Alt Text


6. react-native-3dcube-navigation

a great page turning effect

github 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.

npm i react-native-3dcube-navigation --save
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

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.

Discussion

pic
Editor guide
Collapse
pamprog profile image
PamProg

5 very interesting and creative React and 1 Vue libraries*

Collapse
gorango profile image
Goran Spasojevic

^ A much more fitting title @lindelof (although much less clickbaity, I'll admit)

I would also replace very with vaguely since the JS ecosystem is full of libraries with much more creativity and utility. These are merely wrappers and helpers and are barely innovative...

Collapse
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Hello, lindelof.

I'm guessing any of these libraries will work in vanilla JS and I must use React/Vue? If so, maybe you should specify it in the post title!

However they're amazing, loving the particles in the mouse, going back to my beloved 90's, woo-hoo!

Collapse
lindelof profile image
lindelof Author

Yes you are right, thank you very much for your appreciation.

Collapse
ottodranik profile image
Y.Shepard

Came to see js libraries, but saw react and vue libraries. Hmm... I guess, something wrong in modern fe world

Collapse
lindelof profile image
lindelof Author

Oh, isn't react vue part of javascript.

Collapse
vijayreddyalavala profile image
Collapse
bgatwitt profile image
bga

Awesome, thanks for letting us know such useful collection of libraries.

Collapse
acooma profile image
acooma

Love it, thanks!

Collapse
vvilliam5 profile image
Williams Oluwafemi

Amazing stuff lindelof, I personally used the particle bg for my homepage and it looks really nice