react-scrollable-feed - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

 # Change Log 
 
-<a name="1.0.2"></a>
-## [1.0.2](https://github.com/dizco/react-scrollable-feed/compare/v1.0.1...v1.0.2) (2018-11-25)
+<a name="1.1.0"></a>
+## [1.1.0](https://github.com/dizco/react-scrollable-feed/compare/v1.0.4...v1.1.0) (2019-11-10)
+* Added `className` prop
 * Updated dependencies
 
+<a name="1.0.4"></a>
+## [1.0.4](https://github.com/dizco/react-scrollable-feed/compare/v1.0.3...v1.0.4) (2019-07-09)
+* Updated dependencies
+
 <a name="1.0.3"></a>
@@ -11,4 +16,4 @@ ## [1.0.3](https://github.com/dizco/react-scrollable-feed/compare/v1.0.2...v1.0.3) (2019-01-30)
 
-<a name="1.0.4"></a>
-## [1.0.4](https://github.com/dizco/react-scrollable-feed/compare/v1.0.3...v1.0.4) (2019-07-09)
+<a name="1.0.2"></a>
+## [1.0.2](https://github.com/dizco/react-scrollable-feed/compare/v1.0.1...v1.0.2) (2018-11-25)
 * Updated dependencies

dist/index.d.ts

@@ -9,2 +9,3 @@ import * as React from 'react';
     viewableDetectionEpsilon?: number;
+    className?: string;
 };
@@ -11,0 +12,0 @@ declare type ScrollableFeedComponentProps = Readonly<{

dist/index.es.js

@@ -127,4 +127,5 @@ import { createElement, createRef, Component } from 'react';
     ScrollableFeed.prototype.render = function () {
-        var children = this.props.children;
-        return (createElement("div", { className: styles.scrollableDiv, ref: this.wrapperRef },
+        var _a = this.props, children = _a.children, className = _a.className;
+        var joinedClassName = styles.scrollableDiv + (className ? " " + className : "");
+        return (createElement("div", { className: joinedClassName, ref: this.wrapperRef },
             children,
@@ -131,0 +132,0 @@ createElement("div", { ref: this.bottomRef })));

dist/index.js

@@ -131,4 +131,5 @@ 'use strict';
     ScrollableFeed.prototype.render = function () {
-        var children = this.props.children;
-        return (React.createElement("div", { className: styles.scrollableDiv, ref: this.wrapperRef },
+        var _a = this.props, children = _a.children, className = _a.className;
+        var joinedClassName = styles.scrollableDiv + (className ? " " + className : "");
+        return (React.createElement("div", { className: joinedClassName, ref: this.wrapperRef },
             children,
@@ -135,0 +136,0 @@ React.createElement("div", { ref: this.bottomRef })));

dist/test.d.ts

@@ -1,1 +0,1 @@
-export {};
+import '@testing-library/jest-dom/extend-expect';

package.json

 {
   "name": "react-scrollable-feed",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "",
@@ -20,5 +20,8 @@ "author": "dizco",
     "start": "rollup -c -w",
+    "start:silent": "npm start -- --silent",
     "prepare": "npm run build",
     "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
+    "deploy": "gh-pages -d example/build",
+    "cypress:open": "cross-env CYPRESS_CRASH_REPORTS=0 cypress open",
+    "cypress:run": "cross-env CYPRESS_CRASH_REPORTS=0 cypress run"
   },
@@ -32,2 +35,4 @@ "dependencies": {},
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.3",
+    "@testing-library/react": "^9.3.1",
     "@types/jest": "^24.0.15",
@@ -39,5 +44,6 @@ "@types/react": "^16.8.23",
     "cross-env": "^5.2.0",
+    "cypress": "^3.6.0",
     "gh-pages": "^2.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-scripts-ts": "^4.0.8",
@@ -44,0 +50,0 @@ "rollup": "^1.16.7",

README.md

@@ -1,15 +0,34 @@
-# react-scrollable-feed
+<h1 align="center" style="border-bottom: none;">react-scrollable-feed</h1>
+<h3 align="center">Smart scrolling for chat UIs and feeds</h3>
+<p align="center">
+  <a href="https://travis-ci.com/dizco/react-scrollable-feed">
+    <img alt="Build Status" src="https://travis-ci.com/dizco/react-scrollable-feed.svg?branch=master">
+  </a>
+  <a href="https://dashboard.cypress.io/#/projects/eyny7g">
+    <img alt="Cypress Dashboard" src="https://img.shields.io/badge/cypress-dashboard-brightgreen.svg">
+  </a>
+  <a href="https://www.npmjs.com/package/react-scrollable-feed">
+    <img alt="NPM latest version" src="https://img.shields.io/npm/v/react-scrollable-feed/latest.svg">
+  </a>
+  <a href="https://standardjs.com">
+    <img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg">
+  </a>
+  <a href="http://makeapullrequest.com">
+    <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square">
+  </a>
+</p>
+<p align="center">
+  <a href="https://david-dm.org/dizco/react-scrollable-feed">
+    <img alt="dependencies Status" src="https://david-dm.org/dizco/react-scrollable-feed/status.svg">
+  </a>
+  <a href="https://david-dm.org/dizco/react-scrollable-feed?type=peer">
+    <img alt="peerDependencies Status" src="https://david-dm.org/dizco/react-scrollable-feed/peer-status.svg">
+  </a>
+  <a href="https://david-dm.org/dizco/react-scrollable-feed?type=dev">
+    <img alt="devDependencies Status" src="https://david-dm.org/dizco/react-scrollable-feed/dev-status.svg">
+  </a>
+</p>
 
-> 
+UX-wise, asking a user to scroll down manually a chat box when new messages arrive is quite painful. **react-scrollable-feed** aims to alleviate the burden of managing scrolling concerns from React developers. The same concept applies to any other kind of feed where new content arrives dynamically.
 
-[![Build Status](https://travis-ci.com/dizco/react-scrollable-feed.svg?branch=master)](https://travis-ci.com/dizco/react-scrollable-feed)
-[![NPM](https://img.shields.io/npm/v/react-scrollable-feed.svg)](https://www.npmjs.com/package/react-scrollable-feed)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-[![dependencies Status](https://david-dm.org/dizco/react-scrollable-feed/status.svg)](https://david-dm.org/dizco/react-scrollable-feed)
-[![devDependencies Status](https://david-dm.org/dizco/react-scrollable-feed/dev-status.svg)](https://david-dm.org/dizco/react-scrollable-feed?type=dev)
-[![peerDependencies Status](https://david-dm.org/dizco/react-scrollable-feed/peer-status.svg)](https://david-dm.org/dizco/react-scrollable-feed?type=peer)
-
-Perfect for any chat UI or any kind of feed.
-
 ## Demo
@@ -49,3 +68,3 @@
 
-### `forceScroll`
+### forceScroll
 
@@ -57,3 +76,3 @@ - Type: `boolean`
 
-### `animateScroll`
+### animateScroll
 
@@ -65,3 +84,3 @@ - Type: `(element: HTMLElement, offset: number) => void`
 
-### `onScrollComplete`
+### onScrollComplete
 
@@ -73,3 +92,3 @@ - Type: `() => void`
 
-### `changeDetectionFilter`
+### changeDetectionFilter
 
@@ -115,4 +134,11 @@ - Type: `(previousProps: ScrollableFeedComponentProps, newProps: ScrollableFeedComponentProps) => boolean`
 
-### `viewableDetectionEpsilon`
+### className
 
+- Type: `string`
+- Default: `undefined`
+
+`CSS` class that can be added on the wrapping div created by `ScrollableFeed`. 
+
+### viewableDetectionEpsilon
+
 - Type: `number`
@@ -127,4 +153,8 @@ - Default: `2`
 
+## Contibuting
+- Star this GitHub repo :star:
+- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:. See [contributing doc](CONTRIBUTING.md).
+
 ## License
 
 MIT © [Gabriel Bourgault](https://github.com/dizco)

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

61259

increased by4.2%

Lines of code

306

increased by0.99%

Number of lines in readme file

155

increased by24%

Worsened metrics

Dev dependency count

22

increased by15.79%

No dependency changes