Skip to content

Simple module Custom Cursor for reactJS, Functions to change the cursor on your website

Notifications You must be signed in to change notification settings

fitri-hy/hy-custom-cursor-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Modules Custom Cursor for React

ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.

NPM Installation

npm i hytech-component

Import Modules

import CustomCursor from  'hytech-component/CustomCursor';

Implementation Component

<CustomCursor />

Component Customized

<CustomCursor
    cursor="none" 
    size="30px"
    transition="100ms"
    innerBorderSize="5px"
    midBorderSize="2px"
    outerBorderSize="8px"
    cursorClickColor="red"
    innerBorderColor="rgba(255, 255, 0, .25)"
    midBorderColor="rgba(255, 255, 255, .5)"
    outerBorderColor="rgb(255, 255, 0, .33)"
/>

Full Code App.js

import React from 'react';
import CustomCursor from  'hytech-component/CustomCursor';
import './App.css';

function App() {
  return (
    <CustomCursor
      cursor="none" 
      size="30px"
      transition="100ms"
      innerBorderSize="5px"
      midBorderSize="2px"
      outerBorderSize="8px"
      cursorClickColor="red"
      innerBorderColor="rgba(255, 255, 0, .25)"
      midBorderColor="rgba(255, 255, 255, .5)"
      outerBorderColor="rgb(255, 255, 0, .33)"
    />
  );
}

export default App;

Follow Me: FOLLOW

About

Simple module Custom Cursor for reactJS, Functions to change the cursor on your website

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published