react-lrc

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

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

npm install react-lrc

import { Lrc } from 'react-lrc';

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

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.

Current time of lrc, default -1.

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

without verticalSpace:

with verticalSpace:

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

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

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.

The lrc.

The lrc array.

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} />
    </>
  );
};

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

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

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

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

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

MIT