react-snuggle - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

dist/react-snuggle.cjs.js

@@ -43,7 +43,8 @@ 'use strict';
 
-const blackListProps = ['rowGap', 'columnWidth'];
+const blackListProps = ['rowGap', 'columnWidth', 'uniqueid'];
 const removeBlackListed = removeKeys(blackListProps);
 class Snuggle extends React.PureComponent {
-    constructor() {
-        super(...arguments);
+    constructor(props) {
+        super(props);
+        this.gridId = null;
         this.reposition = false;
@@ -90,8 +91,12 @@ this.elements = [];
             const { rowGap = 0, columnWidth = 0 } = this.props;
-            return {
-                display: 'grid',
-                gridGap: `${rowGap}px`,
-                gridTemplateColumns: `repeat(auto-fill, minmax(${columnWidth}px, 1fr))`,
-            };
+            return `
+      <style>
+        .${this.gridId} {
+          display: grid;
+          grid-gap: ${rowGap}px;
+          grid-template-columns: repeat(auto-fill, minmax(${columnWidth}px, 1fr));
+        }
+      </style>`;
         };
+        this.gridId = `snuggle--${props.uniqueid || key()}`;
     }
@@ -124,4 +129,8 @@ componentDidMount() {
         });
-        const containerProps = removeBlackListed(Object.assign({}, container.props, compProps, { ref: refGrid, style: Object.assign({}, container.props.style, this.createGridStyle()) }));
-        return React.createElement(container.type, containerProps, renderChildren);
+        const containerProps = removeBlackListed(Object.assign({}, container.props, compProps, { className: `${this.gridId} ${container.props.className || ''}`, ref: refGrid }));
+        return (React.createElement(React.Fragment, null,
+            React.createElement('div', {
+                dangerouslySetInnerHTML: { __html: this.createGridStyle() },
+            }),
+            React.createElement(container.type, containerProps, renderChildren)));
     }
@@ -134,4 +143,5 @@ }
     rowGap: 20,
+    uniqueid: '',
 };
 
 exports.default = Snuggle;

package.json

 {
   "name": "react-snuggle",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Simple masonry-like css-based React Component",
@@ -5,0 +5,0 @@ "keywords": [

stories/index.stories.js

@@ -1,7 +0,7 @@
-import React from "react"
-import { storiesOf } from "@storybook/react"
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs"
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'
 
-import "./style.css"
-import Snuggle from "../src"
+import './style.css'
+import Snuggle from '../src'
 
@@ -12,7 +12,7 @@ import {
   OnUpdateGrid,
-  RevealAnimation
-} from "./parts"
+  RevealAnimation,
+} from './parts'
 
-storiesOf("Snuggle", module)
-  .add("default", () => (
+storiesOf('Snuggle', module)
+  .add('default', () => (
     <div className="wrap">
@@ -23,3 +23,3 @@ <Snuggle item={<div className="card" />}>{listElements()}</Snuggle>
 
-  .add("with images", () => (
+  .add('with images', () => (
     <div className="wrap">
@@ -30,3 +30,3 @@ <Snuggle item={<div className="card" />}>{listElements(true)}</Snuggle>
 
-  .add("no style", () => (
+  .add('no style', () => (
     <div className="wrap">
@@ -37,11 +37,16 @@ <Snuggle>{listElements()}</Snuggle>
 
-  .add("on update grid", () => <OnUpdateGrid />)
+  .add('on update grid', () => <OnUpdateGrid />)
 
-storiesOf("Options", module)
+storiesOf('Options', module)
   .addDecorator(withKnobs)
 
-  .add("custom container (<ul />)", () => (
+  .add('custom container (<ul />)', () => (
     <div className="wrap">
       <Snuggle
-        container={<ul style={{ background: "#5050FF", padding: "40px" }} />}
+        container={
+          <ul
+            className="my-custom-class"
+            style={{ background: '#5050FF', padding: '40px' }}
+          />
+        }
       >
@@ -53,6 +58,6 @@ {listElements(true)}
 
-  .add("custom item (<li />)", () => (
+  .add('custom item (<li />)', () => (
     <div className="wrap">
       <Snuggle
-        item={<li style={{ border: "1px solid #ddd", padding: "8px" }} />}
+        item={<li style={{ border: '1px solid #ddd', padding: '8px' }} />}
       >
@@ -64,3 +69,3 @@ {listElements(true)}
 
-  .add("with Styled Components", () => (
+  .add('with Styled Components', () => (
     <div className="wrap">
@@ -71,6 +76,6 @@ <Snuggle item={<ItemStyled />}>{listElements(true)}</Snuggle>
 
-  .add("custom gap", () => (
+  .add('custom gap', () => (
     <div className="wrap">
       <h1>See Knobs panel</h1>
-      <Snuggle rowGap={number("rowGap", 20)} item={<div className="card" />}>
+      <Snuggle rowGap={number('rowGap', 20)} item={<div className="card" />}>
         {listElements(true)}
@@ -81,7 +86,7 @@ </Snuggle>
 
-  .add("custom column width", () => (
+  .add('custom column width', () => (
     <div className="wrap">
       <h1>See Knobs panel</h1>
       <Snuggle
-        columnWidth={number("columnWidth", 400)}
+        columnWidth={number('columnWidth', 400)}
         item={<div className="card" />}
@@ -94,4 +99,4 @@ >
 
-storiesOf("Third party dependencies", module).add("with scroll reveal", () => (
+storiesOf('Third party dependencies', module).add('with scroll reveal', () => (
   <RevealAnimation />
 ))

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

397760

increased by1583.14%

Number of package files

27

increased by35%

Lines of code

927

increased by59.28%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes