[

DEMO

Installation

npm install react-json-skeleton-loader

Plugin

import JsonSkeletonLoader from 'react-json-skeleton-loader';

Component

Content

You can implement multiple types of skeleton loaders simultaneously using content property.

import JsonSkeletonLoader from 'react-json-skeleton-loader'

const temp = () => {
  return (
    <JsonSkeletonLoader
      defaultSize={{
        box: '100px',
        circle: '100px'
      }}
      content={[['box', 'title + text:3'], [text:3]]}
      />
  )
}

import JsonSkeletonLoader from 'react-json-skeleton-loader'

const temp = () => {
  return (
    <JsonSkeletonLoader
      defaultSize={{
        box: '100px',
        circle: '100px'
      }}
      content={[['box', 'blink', 'title + text:3'], ['text:3'], ['box', 'text:2']}
      />
  )
}

Options

Options allow you to implement different styles of Skeleton Loaders.

import JsonSkeletonLoader from 'react-json-skeleton-loader'

const temp = () => {
  return (
    <JsonSkeletonLoader
      defaultSize={{
        box: '100px',
        circle: '100px'
      }}
      options={{
        speed: 0.5,
        radius: 15,
        primaryColor: '#ffb0b0',
        secondaryColor: '#4c8bf5'
      }}
      content={[['box', 'title + text:3'], [text:3]]}
      />
  )
}

📝 License

Copyright © 2022. Built by INTEGRATION Corp.
This project is distributed under MIT license.