{"id":39248213,"url":"https://github.com/tzmcion/reactropes","last_synced_at":"2026-01-18T00:01:07.299Z","repository":{"id":198558655,"uuid":"700380777","full_name":"tzmcion/ReactRopes","owner":"tzmcion","description":"Render images to behave like objects hanging on the rope","archived":false,"fork":false,"pushed_at":"2024-02-17T11:55:21.000Z","size":1065,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-21T22:31:37.704Z","etag":null,"topics":["front-end-development","image-manipulation","react-images","rope-string"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tzmcion.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-04T13:44:21.000Z","updated_at":"2024-02-17T10:01:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"3594cf0d-388b-48d1-89a9-f4eadca6262c","html_url":"https://github.com/tzmcion/ReactRopes","commit_stats":null,"previous_names":["tzmcion/reactropes"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tzmcion/ReactRopes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactRopes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactRopes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactRopes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactRopes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzmcion","download_url":"https://codeload.github.com/tzmcion/ReactRopes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzmcion%2FReactRopes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28523025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T23:53:28.710Z","status":"ssl_error","status_checked_at":"2026-01-17T23:52:20.131Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["front-end-development","image-manipulation","react-images","rope-string"],"created_at":"2026-01-18T00:00:25.206Z","updated_at":"2026-01-18T00:01:07.032Z","avatar_url":"https://github.com/tzmcion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Ropes\r\n\r\nA tool do display image as dynamicaly animated object on a line or rope\r\n\u003cbr /\u003e\r\n\u003ca href='https://www.genomica.pl/program'\u003eExample on Genomica website\u003c/a\u003e\r\n\u003cimg src='https://github.com/tzmcion/ReactRopes/assets/64361206/fc9126ff-94d3-41cc-9423-f50899403eed' alt='demo gif' width='250' /\u003e\r\n## Usage\r\n\r\nDownload the package:\r\n```node\r\nnpm install react-image-rope\r\n```\r\n\r\nImport rope-image from the package and image which you want to render\r\n  \r\n\r\n```js\r\nimport {RopeImage} from 'react-image-rope';\r\nimport my_image from './my_image.png'  //.gif is not supported\r\n```\r\n\r\nThan use in the component:\r\n\r\n```jsx\r\n\u003cRopeImage className='LoveU' width={250} height={250} src={my_image}/\u003e\r\n```\r\n\r\n## Options\r\n\r\n### Package provides options to edit the behaviour of the component\r\nTo use them we need to import additional object from package\r\n```js\r\nimport {RopeImage,RopeOptions} from 'react-image-rope'\r\nimport my_image from './my_image.png'  //.gif is not supported\r\n```\r\n\r\nThen we need to create object based on those options \u003cbr /\u003e\r\nWe can change the imported object without creating the new one, but then the same changes will be implemented to every object in the app\r\n\r\n```jsx\r\nexport default function MyComponent(){\r\n  const options = {...RopeOptions}; //if we want to change options only for this component\r\n\r\n  options.gravity = 0.2; // changing force of the gravity\r\n  options.radial_blocks = true; //changing if the rope is build out of wheels or rectangles\r\n\r\n  return(\r\n          //adding options prop to the RopeImage component\r\n          \u003cRopeImage className='LoveU' width={250} height={250} options={options} src={my_image}/\u003e\r\n)}\r\n```\r\n\r\n### Advanced Options:\r\n\r\nHere is a description of more advanced options:\r\n\r\n* \u003cb\u003eimg_rotate_target_index\u003c/b\u003e\u003cbr /\u003e\r\n    This option sets the reference point for rotation of the image. By default it is set to the anchor point of the rope, therefore index 0.\r\n*  \u003cb\u003ebounce_type\u003c/b\u003e\u003cbr /\u003e\r\n    This options can be set either to -1,-2,-3 or 0\r\n    -1 allows only bounces off the floor\r\n    -2 allows bounces off the floor and walls\r\n    -3 allows bounces from every wall of rectangle\r\n    0 is no bounces at all\r\n\r\n*  \u003cb\u003everlet_calculation_per_frame\u003c/b\u003e\u003cbr /\u003e\r\n    Sets how much the correction of the objects is calculated per one frame\r\n    Package callculates the disproportion between real distance and target distance betwen blocks, and tries to correct it. The more time it does it per frame, the real distance lim-\u003etarget distance, but it will never reach it exactly. In other words, the more calculations, the more realistic the integration looks, but it costs with the speed, and to much calculations looks very artificial\r\n\r\n*  \u003cb\u003everlet_extend_length\u003c/b\u003e\u003cbr /\u003e\r\n    Extends the lenght of the object to always cover the holes between objects building the line. Can look very blank/flat when used\r\n\r\nTo see all the options open the package file called Options.ts \u003cbr /\u003e\r\nreact-rope-image/src/Options.ts \u003cbr /\u003e\r\nAll are described with comments\r\n\r\n## User Integration\r\n\r\n### Package provides a way to user integration:\r\nFunction which is a handler whenever mouse is over the element of the rope can be defined \u003cbr /\u003e\r\nLet's create an example function:\r\n\r\n```js\r\n  const onPointHover = (point) =\u003e{\r\n    point.set_speed(5,5);  //set's 5 x speed and 5 y speed for the point on which mouse is hovering\r\n  }\r\n```\r\n\r\nusing typescript, we need to import Point from package:\r\n\r\n```ts\r\nimport {RopeImage,RopeOptions,Point} from 'react-image-rope'\r\n[...]\r\n  const onPointHover = (point:Point):void =\u003e{\r\n    point.set_speed(5,5);  //set's 5 x speed and 5 y speed for the point on which mouse is hovering\r\n  }\r\n```\r\n\r\nThen we can just add the handler to the RopeImage\r\n\r\n```js\r\n\u003cRopeImage className='LoveU' width={250} height={250} onHover={onPointHover}/\u003e\r\n```\r\n\r\nCurrently package provides only 2 function to manipulate point on hover: \u003cbr /\u003e\r\n```ts\r\nPoint::set_speed(velocity_x:number,velocity_y:number)  //  //adding velocity to the point\r\nPoint::set_position(x:number,y:number)  //Teleporting to the point\r\n```\r\n\r\nAnd that's all \u003cbr /\u003e\r\npackage is still growing 😊 \u003cbr /\u003e\r\nHave fun with it!! \u003cbr /\u003e\r\n\r\n## Author:\r\nPackage created by tzmcion -- Tymoteusz Apriasz \u003cbr /\u003e\r\nhttps://www.linkedin.com/in/tymoteusz-apriasz-2ba8501a6/\r\n\r\nWant to contribute?\r\nOpen a push request any time you're ready!\r\n\r\nCheck out my other projects!\r\n\r\n### Ciao!\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzmcion%2Freactropes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzmcion%2Freactropes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzmcion%2Freactropes/lists"}