{"id":19759035,"url":"https://github.com/mebtte/react-lrc","last_synced_at":"2025-04-05T06:05:24.788Z","repository":{"id":41280501,"uuid":"255551536","full_name":"mebtte/react-lrc","owner":"mebtte","description":"The react component to display lyric from LRC.","archived":false,"fork":false,"pushed_at":"2025-03-28T22:28:39.000Z","size":14148,"stargazers_count":80,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T05:02:04.675Z","etag":null,"topics":["display-lyric","lrc","lrc-format","lyric","react","react-component"],"latest_commit_sha":null,"homepage":"https://mebtte.github.io/react-lrc/","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/mebtte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2020-04-14T08:23:08.000Z","updated_at":"2025-03-22T14:31:23.000Z","dependencies_parsed_at":"2024-05-03T07:40:16.178Z","dependency_job_id":"3f9fa19d-699c-4582-b11f-dffa06b2e068","html_url":"https://github.com/mebtte/react-lrc","commit_stats":{"total_commits":69,"total_committers":2,"mean_commits":34.5,"dds":0.01449275362318836,"last_synced_commit":"3fac8384d594a325fb2a1c136150047c8e0858c8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mebtte%2Freact-lrc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mebtte%2Freact-lrc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mebtte%2Freact-lrc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mebtte%2Freact-lrc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mebtte","download_url":"https://codeload.github.com/mebtte/react-lrc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294538,"owners_count":20915340,"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","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":["display-lyric","lrc","lrc-format","lyric","react","react-component"],"created_at":"2024-11-12T03:27:21.254Z","updated_at":"2025-04-05T06:05:24.761Z","avatar_url":"https://github.com/mebtte.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-lrc [![version](https://img.shields.io/npm/v/react-lrc)](https://www.npmjs.com/package/react-lrc) [![license](https://img.shields.io/npm/l/react-lrc)](https://github.com/mebtte/react-lrc/blob/master/LICENSE) [![](https://img.shields.io/bundlephobia/minzip/react-lrc)](https://bundlephobia.com/result?p=react-lrc)\n\nThe react component to display lyric from LRC. See [example](https://mebtte.github.io/react-lrc) or play on [CodeSandbox](https://codesandbox.io/s/3-playground-ku96gv).\n\n## [2.x README](https://github.com/mebtte/react-lrc/blob/d714e64e5bb70a551b498559436fdd9f1d71f8ce/README.md)\n\n## Feature\n\n- Auto scroll smoothly\n- Support multiple lrcs\n- User srcollable\n- Custom style\n- Typescript support\n\n## Install \u0026 Usage\n\n```sh\nnpm install react-lrc\n```\n\n```jsx\nimport { Lrc } from 'react-lrc';\n\nconst Demo = () =\u003e {\n  // ...\n  return (\n    \u003cLrc\n      lrc={lrc}\n      lineRenderer={lineRenderer}\n      currentMillisecond={currentMillisecond}\n    /\u003e\n  );\n};\n```\n\n## Reference\n\n### Common Component Props\n\n#### `lineRenderer`: ({ index: number, active: boolean, line: Line }) =\u003e React.ReactNode\n\nThe method to render every valid line of parsed lrc. `active` means whether it is current line. `Line` is `LrcLine` when using `Lrc` component or is `MultipleLrcLine` when `MultipleLrc`.\n\n#### `currentMillisecond`?: number\n\nCurrent time of lrc, default `-1`.\n\n#### `verticalSpace`?: boolean\n\nMake active line always vertical-middle even start or end of line list, default `false`.\n\nwithout verticalSpace:\n\n![](./docs/without_vertical_space.png)\n\nwith verticalSpace:\n\n![](./docs/with_vertical_space.png)\n\n#### `onLineUpdate`?: ({ index: number, line: Line | null }) =\u003e void\n\nCall this when current line changed. `Line` is `LrcLine` when using `Lrc` component or is `MultipleLrcLine` when `MultipleLrc`.\n\n#### `recoverAutoScrollInterval`\n\nThe interval of recovering auto scroll after user scrolling. It is `millisecond`, default `5000`.\n\n#### `onAutoScrollChange`?: ({ autoScroll: boolean }) =\u003e void\n\nThere is a state which indicates whether or not it is auto-scroll, and which default value is `true`. When scrolling by user, it will be set to `false`. After `recoverAutoScrollInterval` milliseconds, it will be set to `true` automatically. `onAutoScrollChange` will be called when the state changed.\n\n### Component `Lrc`\n\n#### `lrc`: string\n\nThe lrc.\n\n### Component `MultipleLrc`\n\n#### `lrcs`: string[]\n\nThe lrc array.\n\n### Hook `useRecoverAutoScrollImmediately`\n\nWhen user scroll, `react-lrc` will stop auto scroll during `recoverAutoScrollInterval`. `useRecoverAutoScrollImmediately` helps recover auto scroll immediately.\n\n```tsx\nimport { Lrc, useRecoverAutoScrollImmediately } from 'react-lrc';\n\nconst Demo = () =\u003e {\n  const { signal, recoverAutoScrollImmediately } =\n    useRecoverAutoScrollImmediately();\n\n  return (\n    \u003c\u003e\n      \u003cbutton type=\"button\" onClick={recoverAutoScrollImmediately}\u003e\n        recover auto scroll immediately\n      \u003c/button\u003e\n      \u003cLrc {...otherProps} recoverAutoScrollSingal={signal} /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Q \u0026 A\n\n### How to prevent user scroll ?\n\n```jsx\nconst style = { overflow: 'hidden !important' };\n\n\u003cLrc style={style} recoverAutoScrollInterval={0} {...otherProps} /\u003e;\n```\n\n### How to hide scrollbar ?\n\n```scss\n.lrc {\n  /* webkit */\n  \u0026::-webkit-scrollbar {\n    width: 0;\n    height: 0;\n  }\n\n  /* firefox */\n  scrollbar-width: none;\n}\n```\n\n```jsx\n\u003cLrc className=\"lrc\" {...otherProps} /\u003e\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmebtte%2Freact-lrc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmebtte%2Freact-lrc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmebtte%2Freact-lrc/lists"}