@trainline/react-skeletor - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

lib/createSkeletonElement.js

@@ -23,3 +23,9 @@ "use strict";
     ) {
-        var _b = _a.skeletor, isPending = _b.isPending, styling = _b.styling;
+        var skeletor = _a.skeletor;
+        var isPending;
+        var styling;
+        if (skeletor) {
+            isPending = skeletor.isPending;
+            styling = skeletor.styling;
+        }
         var newProps = __assign({}, props);
@@ -26,0 +32,0 @@ if (isPending) {

lib/createSkeletonProvider.d.ts

 import * as React from 'react';
-import { AnyComponent } from './utils';
 export declare type DummyFn<TProps> = (props: TProps) => TProps;
 export declare type DummyData<TProps> = TProps | DummyFn<TProps>;
-export declare function createSkeletonProvider<TPendingProps, TProps extends TPendingProps = TPendingProps>(dummyData: DummyData<TPendingProps>, predicate: (props: TPendingProps) => boolean, styling?: React.CSSProperties | string): (WrappedComponent: AnyComponent<TProps, void>) => React.ComponentClass<TPendingProps>;
+export declare function createSkeletonProvider<TPendingProps, TProps extends TPendingProps = TPendingProps>(dummyData: DummyData<TPendingProps>, predicate: (props: TPendingProps) => boolean, styling?: React.CSSProperties | string): (WrappedComponent: any) => any;

lib/createSkeletonProvider.js

@@ -20,3 +20,8 @@ "use strict";
 function createSkeletonProvider(dummyData, predicate, styling) {
-    return function (WrappedComponent) {
+    return function (
+        // tslint:disable-next-line:max-line-length
+        // tslint:disable-next-line:no-any
+        WrappedComponent
+        // tslint:disable-next-line:no-any
+    ) {
         var ExportedComponent = (function (_super) {
@@ -23,0 +28,0 @@ __extends(ExportedComponent, _super);

lib/utils.d.ts

 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-export declare type AnyComponent<TProps, TState> = React.StatelessComponent<TProps> | (new () => React.Component<TProps, TState>) | (new () => React.PureComponent<TProps, TState>);
 export interface Pendable {
@@ -5,0 +4,0 @@ isPending: boolean;

package.json

 {
   "name": "@trainline/react-skeletor",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Make your application look nice when its loading!",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -10,6 +10,13 @@ [![npm](https://img.shields.io/npm/v/@trainline/react-skeletor.svg)](https://www.npmjs.com/package/@trainline/react-skeletor)
 
-## Skeleton preview for React components
+Display a skeleton preview of the application's content before the data get loaded.
 
-Display a skeleton preview of your application's content before the data get loaded
+## [Demo](https://trainline.github.io/react-skeletor)
 
+## How it works
+![React-skeletor gif](/blog_posts.png)
+
+Red box: Component `createSkeletonProvider` responsible for injecting the dummy data in order to make sure you render all the nested components. The number of characters of the properties of the injected dummy data is going to define the length of your placeholder designs.
+
+Green box: Component `createSkeletonElement` should wrap a leaf component (title, description, image...), it will switch between the placeholder design defined as a third parameter of `createSkeletonProvider` or second parameter of `createSkeletonElement` and the content of the data.
+
 ## [Documentation](Documentation.md)
@@ -25,8 +32,8 @@
 
-2. Wrap your component (often a container) with the `createSkeletonProvider` high order component. This adds the pending status and style into the [context](https://facebook.github.io/react/docs/context.html).
+2. Wrap the component (often a container) with the `createSkeletonProvider` high order component. This adds the loading status and style into the [context](https://facebook.github.io/react/docs/context.html) and inject fake data in the components subtree.
 
 ```jsx
-// UserDetailPage.js
+// UserDetailPage.jsx
 
-import { createSkeltonProvider } from '@trainline/react-skeletor';
+import { createSkeletonProvider } from '@trainline/react-skeletor';
 
@@ -42,3 +49,3 @@ const UserDetailPage = ({ user }) => (
 export default createSkeletonProvider(
-  // Dummy data with a similar shape to your component's data
+  // Dummy data with a similar shape to the component's data
   {
@@ -48,18 +55,26 @@ firstName: '_____',
   },
-  // Predicate specifying whether or not your data is loaded
-  ({ user }) => user === undefined
+  // Predicate specifying whether or not the data is loaded
+  ({ user }) => user === undefined,
+  // Define the placeholder design for the children elements,
+  () => ({
+    color: 'grey',
+    backgroundColor: 'grey'
+  })
 )(UserDetailPage);
 ```
 
-3. Use a skeleton element to magically style your component when data is pending with zero effort!
+3. Use a skeleton element to toggle between the placehoder design and the real content depending on the loading status in the context.
 
 ```jsx
-// NameCard.js
+// NameCard.jsx
 
-import { h1 as SkeletonH1, h2 as SkeletonH2 } from '@trainline/react-skeletor';
+import { createSkeletonElement } from '@trainline/react-skeletor';
 
+const H1 = createSkeletonElement('h1');
+const H2 = createSkeletonElement('h2');
+
 const NameCard = ({ firstName, lastName }) => (
   <div>
-    <SkeletonH1 style={style}>{ firstName }</SkeletonH1>
-    <SkeletonH2 style={style}>{ lastName }</SkeletonH2>
+    <H1 style={style}>{ firstName }</H1>
+    <H2 style={style}>{ lastName }</H2>
   </div>
@@ -66,0 +81,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16716

increased by6.69%

Lines of code

174

increased by4.82%

Number of lines in readme file

85

increased by21.43%

No dependency changes