react-lrc
v3.2.1
Published
The react component to display lyric from LRC.
Downloads
502
Readme
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} />