https://github.com/amirho1/react-special-cursor
react-special-cursor gives you the ability to decorate your cursor not only one shape it let you change the shape with the different class name that you passed to Component
https://github.com/amirho1/react-special-cursor
animated-cursor cursor cursor-theme custom-cursors raect react-cursor react-special-cursor typescript-library typescript-react
Last synced: about 1 month ago
JSON representation
react-special-cursor gives you the ability to decorate your cursor not only one shape it let you change the shape with the different class name that you passed to Component
- Host: GitHub
- URL: https://github.com/amirho1/react-special-cursor
- Owner: amirho1
- License: mit
- Created: 2021-11-11T16:04:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-05T07:32:41.000Z (over 2 years ago)
- Last Synced: 2025-03-29T16:23:14.494Z (about 2 months ago)
- Topics: animated-cursor, cursor, cursor-theme, custom-cursors, raect, react-cursor, react-special-cursor, typescript-library, typescript-react
- Language: TypeScript
- Homepage: https://amirho1.github.io/react-special-cursor/
- Size: 1.21 MB
- Stars: 22
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# custom-react-cursor
A [React](https://reactjs.org) Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css
## [Demo live](https://amirho1.github.io/react-special-cursor/)
## Installing
```
npm i react-special-cursor
```
## Running Demo
```
npm i
```
```
npm run serve
```
## Build
```
npm run build
```
## Test
it's on watch mode you can change it through [package.json](./package.json)
```
npm run test
```
## Usage
```javascript
import Cursor from "react-special-cursor";
function App() {
return (
...
);
}
```
if you want to put something beside App component you should put them inside a **Fragment** like this
```javascript
import Cursor from "react-special-cursor";
function App() {
return (
...
...
);
}
// or
function App() {
return (
<>
...
...
...
>
);
}
// also you can do this
function App() {
return ...} />;
}
```
# Example file
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Cursor from "./Cursor/Cursor";
import "./demo.scss";
const welcome = (
Welcome to Demo of React-special-cursor from version 1.1.0 u will have the
ability to show texts, elements ... on hover inside the cursor-dot by only
adding a cursorChildren to hoverClass object
Click to see documentation
);
export default function App() {
return (
React-cursors
A custom animated cursor for{" "}
React
{" "}
also supports{" "}
{" "}
Typescript
You can hover over the links and click to see animations
Author:{" "}
{" "}
AmirHossein Salighedar
);
}
const container = document.getElementById("root");
const root = container && createRoot(container);
root?.render();
}
```
### css example
cursor-dot is default the className for dot and for border is cursor-border
```css
body {
background-color: #333;
color: white;
margin: 0;
padding: 0;
height: 1000px;
}
a {
color: rgb(0, 166, 216);
text-decoration: none;
}
.wrapper {
margin: auto;
width: 60%;
text-align: center;
line-height: 2em;
}
.hover .cursor-dot {
width: 100px;
height: 100px;
z-index: -1;
background-color: lightblue;
}
.hover .cursor-border {
z-index: -1;
}
.link {
padding: 1em;
}
.react-hover .cursor-border {
background-color: white;
width: 50px;
height: 50px;
border-radius: 0;
z-index: -1;
}
.react-hover .cursor-dot {
z-index: -3;
}
.author {
color: orange;
font-weight: 800;
font-size: 1.3em;
}
.author-on-hover .cursor-dot {
width: 100px;
height: 100px;
background-color: gray;
z-index: -1;
}
.author-on-hover .cursor-border {
z-index: -1;
}
.head {
color: bisque;
}
.head-hover .cursor-border {
border: 5px dotted darkorange;
}
.head-hover .cursor-dot {
background-color: purple;
width: 20px;
height: 20px;
}
.children {
color: rgb(114, 253, 0);
}
.children-hover .cursor-dot {
width: 600px;
height: 600px;
background-color: white;
color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.children-hover .cursor-border {
z-index: -1;
}
.h3 {
color: #333;
padding: 2em;
}
.react-icon {
width: 200px;
position: absolute;
top: 2em;
right: 10.5em;
}
```
## Properties
| Name | Type | Description |
| --------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children | JSX.Element | the rest of your application i should be App component |
| borderClassName | string | className of cursor border |
| dotClassName | string | className of cursor inner dot |
| turnOffOnPhone | boolean | turns off special cursor when user device is phone |
| hoverClasses | object | an array of objects that each object accepts 2 string one with name of classNameOfTargetElement that accepts the className of the elements that you want to have some styles on hover second is classNameOfStyle the className that will passed to the cursor-wrapper element from that you have access to modify cursor-dot and cursor-border on each hover also in version 1.1.0 it has a third property that you can display HTMLElement or text inside the cursor-dot you can check the Demo |
## hoverClasses Object Type
```typescript
[
{
classNameOfTargetElement: string;
classNameOfStyle: string;
cursorChildren: JSX.Element | string | undefined | number
}
]
```
## detecting phone devices
it's detecting phone devices so u can turn it off on phone devices (it's off by default) but u cant turn it on by setting turnOffOnPhone to false
## Author
[**AmirHossein Salighedar**](https://github.com/amirho1)
## License
[MIT](./LICENSE)