{"id":16594258,"url":"https://github.com/jh3y/use-caret-position","last_synced_at":"2025-08-02T08:37:31.960Z","repository":{"id":57152129,"uuid":"307796330","full_name":"jh3y/use-caret-position","owner":"jh3y","description":"A custom React hook for grabbing the caret position in a text input.","archived":false,"fork":false,"pushed_at":"2022-08-05T03:07:50.000Z","size":102,"stargazers_count":38,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-25T21:55:03.988Z","etag":null,"topics":["caret","dom","dom-manipulation","hacktoberfest","hooks","hooks-api-react","react","reactjs","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://use-caret-position.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jh3y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-27T18:43:29.000Z","updated_at":"2025-05-03T13:26:56.000Z","dependencies_parsed_at":"2022-09-05T15:41:46.882Z","dependency_job_id":null,"html_url":"https://github.com/jh3y/use-caret-position","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jh3y/use-caret-position","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jh3y%2Fuse-caret-position","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jh3y%2Fuse-caret-position/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jh3y%2Fuse-caret-position/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jh3y%2Fuse-caret-position/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jh3y","download_url":"https://codeload.github.com/jh3y/use-caret-position/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jh3y%2Fuse-caret-position/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268070367,"owners_count":24190883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["caret","dom","dom-manipulation","hacktoberfest","hooks","hooks-api-react","react","reactjs","ui","ui-components"],"created_at":"2024-10-11T23:45:42.900Z","updated_at":"2025-08-02T08:37:31.888Z","avatar_url":"https://github.com/jh3y.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-caret-position\n\nA custom React hook for grabbing the caret position in an input field.\n\n## Install\n\n```shell\nnpm i use-caret-position\n```\n\n```shell\nyarn add use-caret-position\n```\n\n## Usage\n\nRefer to `src/app/index.js` for common usage examples.\n\nAt a high-level, you pass the hook an input ref.\n\n```javascript\nimport useCaretPosition from 'use-caret-position'\n```\n```javascript\nconst { x, y, getPosition, getSelection } = useCaretPosition(inputRef)\n```\n```javascript\n\u003cinput type=\"text\" ref=\"inputRef\" onInput{() =\u003e getPosition(inputRef)} /\u003e\n\u003cspan style={{ \"--x\": x, \"--y\": y }}\u003eI'm the marker\u003c/span\u003e\n```\n\nYou get an `x` and `y` coordinate that you can use to display a marker with. I'd recommend using CSS variables for this. This is what the demos do. `getPosition` and `getSelection` are functions __you can trigger whenever you need to update__ the `x` and `y` positions.\n\n`getPosition` returns the position at `selectionStart` for an input. `getSelection` returns a midpoint between `selectionStart` and `selectionEnd` for an input. It's tricky to provide an exact accurate `x` and `y` for the caret in all scenarios so often you might need to adjust the positioning slightly with CSS transforms.\n\n## Development\n\nPackage is built with `parcel-bundler`. To get to work, use `yarn dev`.\n\nTo work with the test app, you'll also need to run `yarn` and `yarn dev` from within `src/app`.\n\nTo work with the published node module directly, use `npm link` in the root of the repo.\n\nThen use `npm link use-caret-position` within `src/app`.\n\n---\n\nMade in haste by @jh3y 2020 :sweat_smile:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjh3y%2Fuse-caret-position","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjh3y%2Fuse-caret-position","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjh3y%2Fuse-caret-position/lists"}