You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
react-change-highlight
Advanced tools
react-change-highlight - npm Package Compare versions
Comparing version 1.2.0-0 to 1.2.0
| import React from "react"; | ||
| declare type Props = { | ||
| interface Props { | ||
| children: React.ReactChildren; | ||
@@ -9,4 +9,5 @@ containerClassName?: string; | ||
| disabled?: boolean; | ||
| }; | ||
| ssr?: boolean; | ||
| } | ||
| declare const ChangeHighlight: React.FC<Props>; | ||
| export default ChangeHighlight; |
@@ -97,3 +97,9 @@ 'use strict'; | ||
| var addStyleString = function (str) { | ||
| var addStyleString = function (str, isSSR) { | ||
| if (isSSR === void 0) { isSSR = false; } | ||
| // do nothing in case of SSR | ||
| if (!document || isSSR) { | ||
| console.warn("\"react-change-highlight\", As you're using server-side rendering, it's a must to create and \n pass your css class to the highlightStyle attribute for \"HighlightChange\" component "); | ||
| return; | ||
| } | ||
| var node = document.createElement("style"); | ||
@@ -109,7 +115,7 @@ node.innerHTML = str; | ||
| var ChangeHighlight = function (_a) { | ||
| var children = _a.children, containerClassName = _a.containerClassName, _b = _a.showAfter, showAfter = _b === void 0 ? defaults.TIME_TO_HIGHLIGHT : _b, _c = _a.hideAfter, hideAfter = _c === void 0 ? defaults.TIME_TO_STOP_HIGHLIGHT : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? defaults.HIGHLIGHT_CLASS : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e; | ||
| var _f = React.useState([]), shadowDOM = _f[0], setShadowDOM = _f[1]; | ||
| var children = _a.children, containerClassName = _a.containerClassName, _b = _a.showAfter, showAfter = _b === void 0 ? defaults.TIME_TO_HIGHLIGHT : _b, _c = _a.hideAfter, hideAfter = _c === void 0 ? defaults.TIME_TO_STOP_HIGHLIGHT : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? defaults.HIGHLIGHT_CLASS : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.ssr, ssr = _f === void 0 ? false : _f; | ||
| var _g = React.useState([]), shadowDOM = _g[0], setShadowDOM = _g[1]; | ||
| var isInitialMount = React.useRef(true); | ||
| if (!!highlightStyle) { | ||
| addStyleString("\n ." + defaults.HIGHLIGHT_CLASS + " {\n background: #f8ffb4 !important;\n transition: 0.25s ease-in-out;\n }\n "); | ||
| addStyleString("\n ." + defaults.HIGHLIGHT_CLASS + " {\n background: #f8ffb4 !important;\n transition: 0.25s ease-in-out;\n }\n ", ssr); | ||
| } | ||
@@ -116,0 +122,0 @@ React.useEffect(function () { |
@@ -1,1 +0,1 @@ | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function __spreadArrays(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<r;t++)for(var i=arguments[t],l=0,c=i.length;l<c;l++,n++)a[n]=i[l];return a}var createShadowDOM=function(t,r){var e=t.props.children;function a(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}Array.isArray(e)?React__default.Children.forEach(e,function(e){"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()}):"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()},defaults={TIME_TO_HIGHLIGHT:500,TIME_TO_STOP_HIGHLIGHT:2e3,HIGHLIGHT_CLASS:"rc-highlight"},setHighlight=function(e,t,r,a,n,i,l,c,u){if(!r&&e.ref.current){var d=e.ref.current;l&&clearTimeout(l),setTimeout(function(){d.className+=" "+i},a);var o=setTimeout(function(){d.className=d.className.substr(0,d.className.indexOf(i)-1)},a+n);c(o),u(t,o)}},ShadowChild=function(e){var t=e.child,r=e.id,a=e.showAfter,n=e.hideAfter,i=e.highlightStyle,l=e.clearHandler,c=e.updateClearHandler,u=React.useRef(!0),d=React.useState(l),o=d[0],f=d[1],h=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;return React.useEffect(function(){u.current?u.current=!1:setHighlight(t,r,u.current,a,n,i,o,f,c)},[h]),React__default.createElement(React__default.Fragment,null)},addStyleString=function(e){var t=document.createElement("style");t.innerHTML=e,document.body.appendChild(t)},listOfClearHighlightFunctions=[],updateClearHandler=function(e,t){listOfClearHighlightFunctions[e]=t},ChangeHighlight=function(e){var t=e.children,r=e.containerClassName,a=e.showAfter,n=void 0===a?defaults.TIME_TO_HIGHLIGHT:a,i=e.hideAfter,l=void 0===i?defaults.TIME_TO_STOP_HIGHLIGHT:i,c=e.highlightStyle,u=void 0===c?defaults.HIGHLIGHT_CLASS:c,d=e.disabled,o=void 0!==d&&d,f=React.useState([]),h=f[0],s=f[1],g=React.useRef(!0);return u&&addStyleString("\n ."+defaults.HIGHLIGHT_CLASS+" {\n background: #f8ffb4 !important;\n transition: 0.25s ease-in-out;\n }\n "),React.useEffect(function(){g.current&&(g.current=!1),o||(s([]),createShadowDOM({props:{children:t}},s))},[t]),React__default.createElement("div",{className:r},h.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,id:t,child:e,showAfter:n,hideAfter:l,highlightStyle:u,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler})}),t)};module.exports=ChangeHighlight; | ||
| "use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React);function __spreadArrays(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var a=Array(e),n=0;for(t=0;t<r;t++)for(var i=arguments[t],l=0,c=i.length;l<c;l++,n++)a[n]=i[l];return a}var createShadowDOM=function(t,r){var e=t.props.children;function a(){r(function(e){return e?__spreadArrays(e,[t]):[t]})}Array.isArray(e)?React__default.Children.forEach(e,function(e){"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()}):"object"==typeof e?createShadowDOM(e,r):e.toString().trim().length&&a()},defaults={TIME_TO_HIGHLIGHT:500,TIME_TO_STOP_HIGHLIGHT:2e3,HIGHLIGHT_CLASS:"rc-highlight"},setHighlight=function(e,t,r,a,n,i,l,c,o){if(!r&&e.ref.current){var u=e.ref.current;l&&clearTimeout(l),setTimeout(function(){u.className+=" "+i},a);var d=setTimeout(function(){u.className=u.className.substr(0,u.className.indexOf(i)-1)},a+n);c(d),o(t,d)}},ShadowChild=function(e){var t=e.child,r=e.id,a=e.showAfter,n=e.hideAfter,i=e.highlightStyle,l=e.clearHandler,c=e.updateClearHandler,o=React.useRef(!0),u=React.useState(l),d=u[0],s=u[1],h=Array.isArray(t.props.children)?t.props.children.find(function(e){return e.toString().trim().length}):t.props.children;return React.useEffect(function(){o.current?o.current=!1:setHighlight(t,r,o.current,a,n,i,d,s,c)},[h]),React__default.createElement(React__default.Fragment,null)},addStyleString=function(e,t){if(void 0===t&&(t=!1),document&&!t){var r=document.createElement("style");r.innerHTML=e,document.body.appendChild(r)}else console.warn('"react-change-highlight", As you\'re using server-side rendering, it\'s a must to create and \n pass your css class to the highlightStyle attribute for "HighlightChange" component ')},listOfClearHighlightFunctions=[],updateClearHandler=function(e,t){listOfClearHighlightFunctions[e]=t},ChangeHighlight=function(e){var t=e.children,r=e.containerClassName,a=e.showAfter,n=void 0===a?defaults.TIME_TO_HIGHLIGHT:a,i=e.hideAfter,l=void 0===i?defaults.TIME_TO_STOP_HIGHLIGHT:i,c=e.highlightStyle,o=void 0===c?defaults.HIGHLIGHT_CLASS:c,u=e.disabled,d=void 0!==u&&u,s=e.ssr,h=void 0!==s&&s,f=React.useState([]),g=f[0],H=f[1],_=React.useRef(!0);return o&&addStyleString("\n ."+defaults.HIGHLIGHT_CLASS+" {\n background: #f8ffb4 !important;\n transition: 0.25s ease-in-out;\n }\n ",h),React.useEffect(function(){_.current&&(_.current=!1),d||(H([]),createShadowDOM({props:{children:t}},H))},[t]),React__default.createElement("div",{className:r},g.map(function(e,t){return React__default.createElement(ShadowChild,{key:t,id:t,child:e,showAfter:n,hideAfter:l,highlightStyle:o,clearHandler:listOfClearHighlightFunctions[t],updateClearHandler:updateClearHandler})}),t)};module.exports=ChangeHighlight; |
@@ -1,2 +0,2 @@ | ||
| declare const addStyleString: (str: string) => void; | ||
| declare const addStyleString: (str: string, isSSR?: boolean) => void; | ||
| export default addStyleString; |
@@ -23,3 +23,3 @@ { | ||
| }, | ||
| "version": "1.2.0-0", | ||
| "version": "1.2.0", | ||
| "peerDependencies": { | ||
@@ -26,0 +26,0 @@ "react": "^16.8", |
| # react-change-highlight | ||
| [](#contributors) | ||
| [](https://nodei.co/npm/react-change-highlight/) | ||
| > React Change Highlight is a react component to highlight changes in the wrapped component to enhance the UX and grap the focus of the user into the changed value of some parts like the cart in an e-commerce application for example. | ||
@@ -12,6 +13,9 @@ | ||
| ## Install | ||
| ``` | ||
| yarn add react-change-highlight | ||
| ``` | ||
| or | ||
| ``` | ||
@@ -22,7 +26,9 @@ npm install react-change-highlight | ||
| ## Usage | ||
| Basically you need to wrap the components you want to highlight on change inside `HighlightChange` element then add `ref` attribute to each child in this component to be used to be highlighted. | ||
| In the following example the `count` variable comes from state, so when ever that function `setCount()` is called with any different value the background of that wrapped div will be changed | ||
| ```jsx | ||
| import ChangeHighlight from 'react-change-highlight'; | ||
| import ChangeHighlight from "react-change-highlight"; | ||
@@ -37,21 +43,29 @@ export default () => { | ||
| ); | ||
| } | ||
| }; | ||
| ``` | ||
| Default styling for highlighting in case the user didn't use a custom styling using the `highlightStyle` property: | ||
| ```css | ||
| .react-highlight { | ||
| background-color: #f8ffb4; | ||
| transition: all 0.5s ease-in-out; | ||
| } | ||
| background-color: #f8ffb4; | ||
| transition: all 0.5s ease-in-out; | ||
| } | ||
| ``` | ||
| ## SSR (server-side rendering) | ||
| In case of using this module in a server-side rengering app, you should make sure to create and pass your own className to the `highlightStyle` attribute, and to make some hint for you, add `ssr` attribute to the `HighlightChange` element, so it can give you a hint to add a class in your console as a warning. | ||
| ## Props | ||
| |Property|Type|Default|Description| | ||
| |--|--|--|--| | ||
| |`showAfter`|number|500|number of milli seconds before start highlighting| | ||
| |`hideAfter`|number|2500|number of milli seconds before ending highlighting| | ||
| |`containerClassName`|string||className for component container| | ||
| |`highlightStyle`|string||className for highlighing content| | ||
| |`disabled`|boolean|false|weather you need to disable highlighting| | ||
| | Property | Type | Default | Description | | ||
| | -------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------- | | ||
| | `showAfter` | number | 500 | number of milli seconds before start highlighting | | ||
| | `hideAfter` | number | 2500 | number of milli seconds before ending highlighting | | ||
| | `containerClassName` | string | | className for component container | | ||
| | `highlightStyle` | string | | className for highlighing content (a must in case of SSR) | | ||
| | `disabled` | boolean | false | weather you need to disable highlighting | | ||
| | `ssr` | boolean | false | you need to pass this in case of using it with server-side rendering. (gives a hint for adding style) | | ||
| --- | ||
@@ -73,2 +87,2 @@ | ||
| This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! | ||
| This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
16262
12.06%- Lines of code
172
4.88%- Number of low quality alerts
2
-33.33%- Number of lines in readme file
85
21.43%No dependency changes