eye-on-it

Watch the position of the last letter entered in the mouse or input window.

Installation

$3

We can install Swiper from NPM

``bash
$ npm install eye-on-it
`

When you use React

`js
// import eye-on-it JS
import { initEyeOnIt } from "eye-on-it";
// import eye-on-it styles
import "eye-on-it/style.css";

const App = () => {
useEffect(() => {
initEyeOnIt();
}, []);
};
`

$3

`html
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/eye-on-it/dist/style.css"
/>

`

If you use ES module in the browser, there is a CDN version for that too,

`html

`

$3

If you want to use eye-on-it assets locally, you can directly download them from https://www.jsdelivr.com/package/npm/eye-on-it

Add eye-on-it HTML Layout

Now, we need to add a basic eye-on-it layout to our app,

`html

eye

`

Example

But if I do this, I think it'll look weird and I don't understand.
So I prepared an example code.



`html






rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/eye-on-it/dist/style.css"
/>

`

`css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
width: 100%;
height: 100vh;
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
> div {
margin-right: 40px;
}
}

.face {
margin: 0 auto;
width: fit-content;
display: flex;
> div {
width: 20px;
height: 30px;
border: 1px solid black;
& + div {
margin-left: 10px;
}
}
}

.eye {
width: 8px;
height: 12px;
background-color: black;
}

.input-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.input,
.textarea {
width: 20vw;
min-width: 300px;
height: 24px;
margin-top: 20px;
}
.textarea {
height: 50px;
}
.textarea.long {
height: 300px;
}
``

---

한국인을 위해 간단히 한글로 적어봅니다.

- eye-point : 특정한 위치를 따라다니는 el
- eye-container : 마우스 위치를 eye-point가 따라다니는 영역

- eye-input 또는 eye-textarea 가 focus된 상황이라면 eye-point가 따라오지 않음
- 단, always 키워드를 추가하는 경우 focus된 상황에서도 마우스가 움직이면 이를 쳐다봄

- eye-input : input 창에 focus 된 상태에서 입력된 value의 마지막 부분을 eye-point가 쳐다봄
- eye-textarea : eye-input 과 마찬가지로 textarea 창에 focus 된 상태에서 입력된 value의 마지막 부분을 eye-point 가 쳐다봄