{"analyzedAt":"2023-01-09T15:44:53.375Z","collected":{"metadata":{"name":"react-placeholder","scope":"unscoped","version":"4.1.0","description":"A React component to easily replicate your page with nice placeholders while the content is loading","keywords":["react","react-component","placeholder","filler","loading","paragraph"],"date":"2021-02-05T13:19:45.537Z","author":{"name":"Francesco Cioria","email":"francesco@buildo.io"},"publisher":{"username":"giogonzo","email":"giovanni@buildo.io"},"maintainers":[{"username":"gabro","email":"gabriele@buildo.io"},{"username":"veej","email":"vincenzo@buildo.io"},{"username":"giogonzo","email":"giovanni@buildo.io"},{"username":"tpetrucciani","email":"tommaso.petrucciani@buildo.io"},{"username":"malpenzibo","email":"zibo.camito@gmail.com"},{"username":"federico.ercoles","email":"federico.ercoles@buildo.io"}],"repository":{"type":"git","url":"git+ssh://git@github.com/buildo/react-placeholder.git"},"links":{"npm":"https://www.npmjs.com/package/react-placeholder","homepage":"https://github.com/buildo/react-placeholder","repository":"https://github.com/buildo/react-placeholder","bugs":"https://github.com/buildo/react-placeholder/issues"},"license":"ISC","devDependencies":{"@testing-library/jest-dom":"^5.11.9","@testing-library/react":"^11.2.5","@types/enzyme":"^3.10.8","@types/jest":"^26.0.20","@types/lodash":"^4.14.168","@types/node":"12.12.17","@types/react":"^16.9.56","babel-core":"^6.26.3","babel-loader":"^7.1.5","babel-preset-buildo":"^0.1.1","css-loader":"^0.28.11","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","file-loader":"^1.1.11","jest":"^26.6.3","lodash":"^4.17.20","node-sass":"^4.14.1","progress-bar-webpack-plugin":"^1.12.1","raf":"^3.4.1","raw-loader":"^0.5.1","react":"^16.8.0","react-docgen-typescript":"^1.16.1","react-dom":"^16.8.0","react-styleguidist":"^6.0.33","react-test-renderer":"^16.8.0","sass-loader":"^6.0.7","smooth-release":"^8.0.9","ts-jest":"^26.5.0","ts-loader":"^3.5.0","typescript":"~3.9.7","webpack":"3.5.5"},"peerDependencies":{"react":"^16.8.0 || ^17"},"releases":[{"from":"2022-12-10T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-10-11T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-07-13T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-01-09T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2021-01-09T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":1}],"hasTestScript":true,"hasSelectiveFiles":true,"readme":"# React Placeholder\nA React component to easily replicate your page with nice placeholders while the content is loading.\nYou can use a placeholder from the default set, or pass your own!\n\n\n\n```jsx\nimport ReactPlaceholder from 'react-placeholder';\nimport \"react-placeholder/lib/reactPlaceholder.css\";\n\nReact.renderComponent(\n
\n \n \n \n
,\n document.body);\n```\n\n[**Live Demo**](http://buildo.github.io/react-placeholder/#!/ReactPlaceholder)\n\n### Install\n```\nnpm install --save react-placeholder\n```\n\n### Props\n\n```tsx\nchildren: ReactNode;\nready: boolean;\ndelay?: number;\nfirstLaunchOnly?: boolean;\nshowLoadingAnimation?: boolean;\ntype?: 'text' | 'media' | 'textRow' | 'rect' | 'round';\nrows?: number;\ncolor?: string;\ncustomPlaceholder?: ReactElement;\nclassName?: string;\nstyle?: CSSProperties;\n```\n\nThe default props will render a `text` placeholder with `3` rows and the color `#CDCDCD`.\n\n### Customization\nIf the built-in set of placeholders is not enough, you can pass you own through the prop **\"customPlaceholder\"**\n\n```jsx\n}>\n \n\n```\n\nYou can also import the built-in placeholders directly. This might be useful to use them to create your own customized placeholder:\n\n```jsx\nimport {TextBlock, MediaBlock, TextRow, RectShape, RoundShape} from 'react-placeholder/lib/placeholders';\n\nconst awesomePlaceholder = (\n
\n \n \n
\n);\n\n\n \n\n```\n\n### Delay\nYou can pass an optional `delay` prop which specifies the time (in milliseconds) `react-placeholder` should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief \"flash\" on faster connections.\n\nNote that this delay will __not__ affect the initial render, only subsequent \"ready\" state changes. Setting the `firstLaunchOnly` prop to `true` will also disable this feature.\n\n### Animation\n`react-placeholder` already comes with one default pulse animation to better tell the user that the page is loading.\nThe animation is defined in a separate CSS file so, in order to enable it, you should import that style in your project like this:\n\n```js\nimport 'react-placeholder/lib/reactPlaceholder.css';\n```\n\nOnce you've done this, you can simply pass the boolean prop `showLoadingAnimation` to tell `ReactPlaceholder` to animate itself:\n\n```jsx\nimport 'react-placeholder/lib/reactPlaceholder.css';\n\n\n
This is a Test.
\n\n```\n\n### Style\nyou can style the placeholder by passing **```className```** or **```style```** or by using the built-in classes:\n\n*\"text-block\", \"media-block\", \"text-row\", \"rect-shape\", \"round-shape\".*"},"npm":{"downloads":[{"from":"2023-01-08T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":993},{"from":"2023-01-02T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":29931},{"from":"2022-12-10T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":120546},{"from":"2022-10-11T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":450516},{"from":"2022-07-13T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":1069829},{"from":"2022-01-09T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":2104489}],"starsCount":3},"github":{"starsCount":1588,"forksCount":90,"subscribersCount":24,"issues":{"count":114,"openCount":22,"distribution":{"3600":26,"10800":9,"32400":7,"97200":8,"291600":15,"874800":7,"2624400":13,"7873200":5,"23619600":8,"70858800":8,"212576400":8},"isDisabled":false},"contributors":[{"username":"FrancescoCioria","commitsCount":94},{"username":"BrianMitchL","commitsCount":20},{"username":"giogonzo","commitsCount":12},{"username":"gabro","commitsCount":8},{"username":"cburbank","commitsCount":4},{"username":"jeffvandyke","commitsCount":3},{"username":"tkreis","commitsCount":1},{"username":"Borales","commitsCount":1},{"username":"bluemoon","commitsCount":1},{"username":"leonardobaggio","commitsCount":1},{"username":"dwightwatson","commitsCount":1},{"username":"veej","commitsCount":1},{"username":"floo51","commitsCount":1},{"username":"kud","commitsCount":1},{"username":"viktor-nikolaev","commitsCount":1},{"username":"fabiopaiva","commitsCount":1},{"username":"aretecode","commitsCount":1},{"username":"CYBAI","commitsCount":1},{"username":"susomejias","commitsCount":1}],"commits":[{"from":"2023-01-02T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-12-10T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-10-11T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-07-13T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0},{"from":"2022-01-09T00:00:00.000Z","to":"2023-01-09T00:00:00.000Z","count":0}],"statuses":[{"context":"github/pages","state":"success"}]},"source":{"files":{"readmeSize":3397,"testsSize":22060,"hasChangelog":true}}},"evaluation":{"quality":{"carefulness":0.8699999999999999,"tests":0.85,"health":1,"branding":0},"popularity":{"communityInterest":1724,"downloadsCount":150172,"downloadsAcceleration":-392.43803272450555,"dependentsCount":0},"maintenance":{"releasesFrequency":0.012328767123287673,"commitsFrequency":0,"openIssues":1,"issuesDistribution":0}},"score":{"final":0.5592136540244028,"detail":{"quality":0.8642579433463049,"popularity":0.3006616747525203,"maintenance":0.5562990995917979}}}