The react component to display lyric from LRC.
The react component to display lyric from LRC. See example or play on CodeSandbox.
npm install react-lrc
import { Lrc } from 'react-lrc';
const Demo = () => {
// ...
return (
<Lrc
lrc={lrc}
lineRenderer={lineRenderer}
currentMillisecond={currentMillisecond}
/>
);
};
lineRenderer
: ({ index: number, active: boolean, line: Line }) => React.ReactNodeThe 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
?: numberCurrent time of lrc, default -1
.
verticalSpace
?: booleanMake active line always vertical-middle even start or end of line list, default false
.
without verticalSpace:
with verticalSpace:
onLineUpdate
?: ({ index: number, line: Line | null }) => voidCall 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 scroll. It is millisecond
, default 5000
.
Lrc
lrc
: stringThe lrc.
MultipleLrc
lrcs
: string[]The lrc array.
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} />
</>
);
};
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} />