The react component that display lrc format. Play it on online playground.
- Auto scroll smoothly
- User srcollable
- Custom style
- Typescript support
react >= 16.8
withhook
.- ResizeObserver, you should add polyfill probably.
npm install --save react-lrc
import { Lrc } from 'react-lrc';
const Demo = () => {
// ...
return (
<Lrc
lrc={lrc}
lineRenderer={lineRenderer}
currentMillisecond={currentMillisecond}
/>
);
};
The lrc string.
Lyric line's renderer. When active
is true
means it is current line. LyricLine
is exported from clrc.
Current time of lrc string. default 0
.
Whether to scroll when currentMillisecond
changed. default true
;
The interval of recovering auto scroll after user scroll, it is millisecond
. default 5000
.
If true
will insert blank space to top of Lrc
. default false
.
If true
will insert blank space to bottom of Lrc
. default false
.
Call this when current line changed. index
maybe -1
and line
maybe null
. default null
. LyricLine
is exported from clrc.
react-lrc
export type LrcInstance
to determine type useRef
like:
import React, { useRef } from 'react';
import { Lrc, LrcInstance } from 'react-lrc';
const Demo = () => {
const lrcRef = useRef<LrcInstance>();
/**
* use methods like:
* lrcRef.current.getCurrentLine()
*/
return (
<Lrc
ref={lrcRef}
// other props
/>
);
};
getCurrentLine
return current index and current lyric line. Current index maybe -1
and current lyric maybe null
. LyricLine
is exported from clrc.
Make Lrc
component scroll to current line. Call this after user scroll within intervalOfRecoveringAutoScrollAfterUserScroll
generally.
react-lrc
is powered by clrc, you can import everything that export from clrc like:
import { parse } from 'react-lrc';
// do with parse
You probably do not specify height
to Lrc
. The height
make Lrc
scrollable.
<Lrc
style={{ overflow: 'hidden !important' }}
intervalOfRecoveringAutoScrollAfterUserScroll={0}
{...otherProps}
/>
.lrc {
/* webkit */
&::-webkit-scrollbar {
width: 0;
height: 0;
}
/* firefox */
scrollbar-width: none;
/* ie */
-ms-overflow-style: none;
}
<Lrc className="lrc" {...otherProps} />
const lrcRef = useRef();
// lrc dom is lrcRef.current.dom
<Lrc ref={lrcRef} />;