wl-react-skeleton
v1.0.4
Published
React Customizable Skeleton Element
Downloads
17
Readme
wl-react-skeleton
React Skeleton
SkeletonElement
import { SkeletonElement } from 'wl-react-skeleton';
// type SkeletonType = 'avatar' | 'text' | 'title' | 'thumbnail';
export function App() {
return (
<div>
<SkeletonElement type="avatar" />
<SkeletonElement type="text" />
</div>
);
}
THEME PROVIDER
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { SkeletonThemeProvider } from 'wl-react-skeleton';
ReactDOM.render(
<SkeletonThemeProvider>
<App />
</SkeletonThemeProvider>,
document.getElementById('root')
);
import React from 'react';
import { SkeletonElement, useSkeletonTheme } from 'wl-react-skeleton';
interface Props {}
export const SurveyDisplay = (props: Props) => {
const { setTheme } = useSkeletonTheme();
React.useEffect(() => {
setTheme('dark');
}, []);
return (
<div>
<h1>Surveys</h1>
<SkeletonElement type="avatar" size={150} />
<SkeletonElement type="title" />
<SkeletonElement type="text" />
<SkeletonElement type="text" />
<SkeletonElement type="text" />
<SkeletonElement type="text" maxWidth={300} />
<SkeletonElement type="thumbnail" size={40} />
</div>
);
};