react-style-singleton - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/es2015/component.d.ts

 import * as React from 'react';
 declare type Props = {
+    /**
+     * styles to apply
+     */
     styles: string;
+    /**
+     * marks style as dynamic, so it will be reapplied on styles change
+     * note: this is not expected behavior from a "singleton"
+     * @default false
+     */
+    dynamic?: boolean;
 };
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 export declare const styleSingleton: () => React.FC<Props>;
 export {};

dist/es2015/component.js

 import { styleHookSingleton } from './hook';
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 export var styleSingleton = function () {
     var useStyle = styleHookSingleton();
     var Sheet = function (_a) {
-        var styles = _a.styles;
-        useStyle(styles);
+        var styles = _a.styles, dynamic = _a.dynamic;
+        useStyle(styles, dynamic);
         return null;
@@ -8,0 +14,0 @@ };

dist/es2015/hook.d.ts

@@ -1,1 +0,23 @@
-export declare const styleHookSingleton: () => (styles: string) => void;
+/**
+ * creates a style on demand
+ */
+declare type StyleSingletonHook = (
+/**
+ * styles to create
+ */
+styles: string, 
+/**
+ * indication that styles should be reapplied on change
+ */
+isDynamic?: boolean) => void;
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+export declare const styleHookSingleton: () => StyleSingletonHook;
+export {};

dist/es2015/hook.js

 import * as React from 'react';
 import { stylesheetSingleton } from './singleton';
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
 export var styleHookSingleton = function () {
     var sheet = stylesheetSingleton();
-    return function (styles) {
+    return function (styles, isDynamic) {
         React.useEffect(function () {
@@ -11,4 +20,4 @@ sheet.add(styles);
             };
-        }, [styles]);
+        }, [styles && isDynamic]);
     };
 };

dist/es2019/component.d.ts

 import * as React from 'react';
 declare type Props = {
+    /**
+     * styles to apply
+     */
     styles: string;
+    /**
+     * marks style as dynamic, so it will be reapplied on styles change
+     * note: this is not expected behavior from a "singleton"
+     * @default false
+     */
+    dynamic?: boolean;
 };
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 export declare const styleSingleton: () => React.FC<Props>;
 export {};

dist/es2019/component.js

 import { styleHookSingleton } from './hook';
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 export const styleSingleton = () => {
     const useStyle = styleHookSingleton();
-    const Sheet = ({ styles }) => {
-        useStyle(styles);
+    const Sheet = ({ styles, dynamic }) => {
+        useStyle(styles, dynamic);
         return null;
@@ -7,0 +13,0 @@ };

dist/es2019/hook.d.ts

@@ -1,1 +0,23 @@
-export declare const styleHookSingleton: () => (styles: string) => void;
+/**
+ * creates a style on demand
+ */
+declare type StyleSingletonHook = (
+/**
+ * styles to create
+ */
+styles: string, 
+/**
+ * indication that styles should be reapplied on change
+ */
+isDynamic?: boolean) => void;
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+export declare const styleHookSingleton: () => StyleSingletonHook;
+export {};

dist/es2019/hook.js

 import * as React from 'react';
 import { stylesheetSingleton } from './singleton';
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
 export const styleHookSingleton = () => {
     const sheet = stylesheetSingleton();
-    return (styles) => {
+    return (styles, isDynamic) => {
         React.useEffect(() => {
@@ -11,4 +20,4 @@ sheet.add(styles);
             };
-        }, [styles]);
+        }, [styles && isDynamic]);
     };
 };

dist/es5/component.d.ts

 import * as React from 'react';
 declare type Props = {
+    /**
+     * styles to apply
+     */
     styles: string;
+    /**
+     * marks style as dynamic, so it will be reapplied on styles change
+     * note: this is not expected behavior from a "singleton"
+     * @default false
+     */
+    dynamic?: boolean;
 };
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 export declare const styleSingleton: () => React.FC<Props>;
 export {};

dist/es5/component.js

@@ -5,7 +5,13 @@ "use strict";
 var hook_1 = require("./hook");
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
 var styleSingleton = function () {
     var useStyle = (0, hook_1.styleHookSingleton)();
     var Sheet = function (_a) {
-        var styles = _a.styles;
-        useStyle(styles);
+        var styles = _a.styles, dynamic = _a.dynamic;
+        useStyle(styles, dynamic);
         return null;
@@ -12,0 +18,0 @@ };

dist/es5/hook.d.ts

@@ -1,1 +0,23 @@
-export declare const styleHookSingleton: () => (styles: string) => void;
+/**
+ * creates a style on demand
+ */
+declare type StyleSingletonHook = (
+/**
+ * styles to create
+ */
+styles: string, 
+/**
+ * indication that styles should be reapplied on change
+ */
+isDynamic?: boolean) => void;
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+export declare const styleHookSingleton: () => StyleSingletonHook;
+export {};

dist/es5/hook.js

@@ -7,5 +7,14 @@ "use strict";
 var singleton_1 = require("./singleton");
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
 var styleHookSingleton = function () {
     var sheet = (0, singleton_1.stylesheetSingleton)();
-    return function (styles) {
+    return function (styles, isDynamic) {
         React.useEffect(function () {
@@ -16,5 +25,5 @@ sheet.add(styles);
             };
-        }, [styles]);
+        }, [styles && isDynamic]);
     };
 };
 exports.styleHookSingleton = styleHookSingleton;

package.json

 {
   "name": "react-style-singleton",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Just create a single stylesheet...",
@@ -5,0 +5,0 @@ "main": "dist/es5/index.js",

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18260

increased by34.51%

Lines of code

438

increased by55.32%

Number of medium maintenance alerts

0

decreased by-100%

No dependency changes