mebtte / react-lrc

The react component to display lyric from LRC.

react-lrc

The react component to display lyric from LRC. See example or play on CodeSandbox.

2.x README

Feature

• Auto scroll smoothly
• Support multiple lrcs
• User srcollable
• Custom style
• Typescript support

Install & Usage

npm install react-lrc

import { Lrc } from 'react-lrc';

const Demo = () => {
  // ...
  return (
    <Lrc
      lrc={lrc}
      lineRenderer={lineRenderer}
      currentMillisecond={currentMillisecond}
    />
  );
};

Reference

Common Component Props

lineRenderer: ({ index: number, active: boolean, line: Line }) => React.ReactNode

The 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.

currentMillisecond?: number

Current time of lrc, default -1.

verticalSpace?: boolean

Make active line always vertical-middle even start or end of line list, default false.

without verticalSpace:

with verticalSpace:

onLineUpdate?: ({ index: number, line: Line | null }) => void

Call this when current line changed. Line is LrcLine when using Lrc component or is MultipleLrcLine when MultipleLrc.

recoverAutoScrollInterval

The interval of recovering auto scroll after user scrolling. It is millisecond, default 5000.

onAutoScrollChange?: ({ autoScroll: boolean }) => void

There 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.

Component Lrc

lrc: string

The lrc.

Component MultipleLrc

lrcs: string[]

The lrc array.

Hook useRecoverAutoScrollImmediately

When user scroll, react-lrc will stop auto scroll during recoverAutoScrollInterval. useRecoverAutoScrollImmediately helps recover auto scroll immediately.

import { Lrc, useRecoverAutoScrollImmediately } from 'react-lrc';

const Demo = () => {
  const { signal, recoverAutoScrollImmediately } =
    useRecoverAutoScrollImmediately();

  return (
    <>
      <button type="button" onClick={recoverAutoScrollImmediately}>
        recover auto scroll immediately
      </button>
      <Lrc {...otherProps} recoverAutoScrollSingal={signal} />
    </>
  );
};

Q & A

How to prevent user scroll ?

const style = { overflow: 'hidden !important' };

<Lrc style={style} recoverAutoScrollInterval={0} {...otherProps} />;

How to hide scrollbar ?

.lrc {
  /* webkit */
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* firefox */
  scrollbar-width: none;
}

<Lrc className="lrc" {...otherProps} />

License

MIT

react-lrc's Issues

Could not auto scroll to correct line after `Lrc` resized ?

i don't know how to inspect Lrc resize, if you know how please tell me, thanks very much.

lrc 元件放到除了Root元件之外的地方，滾動會失效

如題，我嘗試單獨使用lrc元件，發現可以正常渲染line顏色，但是滾動和verticalSpace會同時失效，想問問要怎麼修改才能生效？
我想放到一個table body 裡面，這會是因為table的關係嗎？
調查之後發現，是外層必須有position absolute 和 display flex和 height 100%，不知道能不能在不需要用到absoult的狀況下實現這種滾動呢？ @mebtte
以下是復現例子：
https://codesandbox.io/s/5-forked-oqdfeq

automatic scrolling status

Hello.
Thank you for the very useful framework.

I want to stop scrolling when the user wants to scroll, but I want an event that fires at that time.

I would like to display the automatic scrolling resume button only when automatic scrolling is disabled.

[FR] qrc和krc（逐字歌词）支持

您好！
我在用react-native端移植的这个代码库，加入了逐字歌词qrc（qq）和krc（kugou）支持，并且有兴趣将改动移植回react库下和使用。我会提交PR.
https://github.com/lovegaoshi/react-native-lyric/pulls?q=is%3Apr+is%3Aclosed

以后是否会增加多语言功能

就往插件传入多份时间轴一样但词不一样的歌词，然后播放的时候同时间轴的歌词一起被高亮出来

像网易云手机版的歌词展示那样子，双语同时高亮显示

Current Lyric not visible when when Lrc is too small

When the Lrc component is too small, the current lyric will be off screen.

10 rem:

15 rem:

Can i using lineRender to control everylinenode's before-avtive, active, after-active

大意是我想利用您的套件，將active後的字變成灰色，active前的字變成與背景同色，而正在active的是綠色，這功能在目前的套件中辦得到嗎？ 我剛學前端，還很多不懂，所以特地鼓起勇氣發問，我研究了好一陣子，不知道調整lineRender這個回呼函示是否就能辦到？ 想要問您是否有一些example code能引導一下我，感謝您，這對我來說意義非凡。