Description:
React Spectrum is a tiny React component to generate colorful, animated placeholder blocks on the application.
Install & Download:
# Yarn $ yarn add react-spectrum # NPM $ npm install react-spectrum --save
How to use it:
1. Import the Spectrum library.
import Spectrum from "react-spectrum";
2. Generate basic text placeholders and specify an array of colors as follows:
function Placeholder() {
return (
<Spectrum
width={460}
colors={["#757575", "#999999", "#0871F2", "#BF5AF2"]}
/>
);
}3. All available props with default values.
width = 500,
colors = ['#eee'],
wordWidths = [30, 60, 90, 120, 150],
wordDistances = [4, 8, 12],
wordHeight = 12,
wordRadius = 20,
linesPerParagraph = 8,
lineDistance = 12,
paragraphs = 1,
paragraphDistance = 24,
truncateLastLine = true,
renderWord = ({ key, style }: RenderWordProps): React.ReactElement => (
<span key={key} style={style} />
),Preview:
