radium - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

docs/api/README.md

@@ -195,1 +195,46 @@ # Radium API
 The match media item mixin applies media queries set in `MatchMediaBase` to a component. To use, add it as a mixin to any component that is a descendent of the component with `MatchMediaBase` that should include media query styles.
+
+## Style Component
+
+The `<Style>` component renders an HTML `<style>` tag containing a set of CSS rules. Using it, you can define an optional `scopeSelector` that all selectors in the resulting `<style>` element will include.
+
+Without the `<Style>` component, it is prohibitively difficult to write a `<style>` element in React. To write a normal `<style>` element, you need to write your CSS as a multiline string inside of the element. `<Style>` simplifies this process, and adds the ability to scope selectors.
+
+### Props
+
+#### rules
+
+An array of CSS rules to render. Each rule is an object with a CSS selector as a key and an object of styles as a value. If rules has no length, the component will render nothing.
+
+```js
+<Style rules={[
+  {
+    body: {
+      margin: 0,
+      fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
+    }
+  },
+  {
+    html: {
+      background: "#ccc"
+    }
+  }
+]} />
+```
+
+#### scopeSelector
+
+A string that any included selectors in `rules` will be appended to. Use to scope styles in the component to a particular element. A good use case might be to generate a unique ID for a component to scope any styles to the particular component that owns the `<Style>` component instance.
+
+```js
+<div class="TestClass">
+  <Style
+  scopeSelector=".TestClass"
+    rules={[
+      h1: {
+        fontSize: "2em"
+      }
+    ]}
+  />
+</div>
+```

docs/guides/media-queries.md

@@ -17,3 +17,3 @@ # Media queries in Radium
 
-React.createClass(App, function () {
+var App = React.createClass({
   mixins: [MatchMediaBase],
@@ -28,3 +28,3 @@ render: function () {...}
 var Sidebar = React.createClass({
-  mixins: [ MatchMediaMixin ],
+  mixins: [ MatchMediaItem ],
   render: function () {...}
@@ -36,6 +36,6 @@ });
 
-To add styles for breakpoints, you can add a `breakpoints` array to your style object under default styles or any modifiers:
+To add styles for media queries, you can add a `mediaQueries` array to your style object under default styles or any modifiers:
 
 ```js
-breakpoints: [
+mediaQueries: [
   {
@@ -42,0 +42,0 @@ sm: {

examples/app.jsx

 var React = require('react');
 
+var { MatchMediaBase } = require('../modules/index');
+
 var Button = require('./components/button.jsx');
 var ComputedWell = require("./components/computed-well.jsx");
-var Style = require("../modules/components/style.jsx");
+var Style = require("../modules/components/style.js");
 
+var MEDIA_QUERIES = {
+  md: '(min-width: 992px)',
+  lg: '(min-width: 1200px)'
+};
+
+MatchMediaBase.init(MEDIA_QUERIES);
+
 var App = React.createClass({
+  mixins: [ MatchMediaBase ],
+
   render: function () {
@@ -30,8 +41,12 @@ return (
 
-        <Style>{{
-          body: {
-            margin: 0,
-            fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
-          }
-        }}</Style>
+        <Style
+          rules={[
+            {
+              body: {
+                margin: 0,
+                fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
+              }
+            }
+          ]}
+        />
 
@@ -43,7 +58,12 @@ <p>
         <p className="scoping-class">
-          <Style scopeSelector=".scoping-class">{{
-            span: {
-              fontFamily: "\"Lucida Console\", Monaco, monospace"
-            }
-          }}</Style>
+          <Style
+            scopeSelector=".scoping-class"
+            rules={[
+              {
+                span: {
+                  fontFamily: "Lucida Console, Monaco, monospace"
+                }
+              }
+            ]}
+          />
           <span>This content has scoped styles</span>
@@ -50,0 +70,0 @@ </p>

examples/components/button.jsx

 var React = require('react');
 var Radium = require('../../modules/index');
-var { StyleResolverMixin, BrowserStateMixin } = Radium;
+var { StyleResolverMixin, BrowserStateMixin, MatchMediaItem } = Radium;
 
 var Button = React.createClass({
-  mixins: [ StyleResolverMixin, BrowserStateMixin ],
+  mixins: [ StyleResolverMixin, BrowserStateMixin, MatchMediaItem ],
 
@@ -19,2 +19,15 @@ getStyles: function () {
 
+      mediaQueries: [
+        {
+          md: {
+            padding: "0.6em 1.2em"
+          }
+        },
+        {
+          lg: {
+            padding: "0.8em 1.5em"
+          }
+        }
+      ],
+
       states: [
@@ -21,0 +34,0 @@ {

examples/components/computed-well.jsx

@@ -10,3 +10,3 @@ var React = require('react');
     return {
-      dynamicBg: null
+      dynamicBg: '#000'
     }
@@ -19,14 +19,6 @@ },
       borderRadius: 5,
-      background: "#000"
+      background: this.state.dynamicBg
     };
   },
 
-  buildComputedStyles: function (baseStyles) {
-    var computedStyles = {};
-
-    computedStyles.backgroundColor = this.state.dynamicBg;
-
-    return computedStyles;
-  },
-
   handleSubmit: function (ev) {
@@ -41,3 +33,3 @@ ev.preventDefault();
   render: function () {
-    var styles = this.buildStyles(this.getStyles(), this.buildComputedStyles);
+    var styles = this.buildStyles(this.getStyles());
 
@@ -44,0 +36,0 @@ return (

modules/index.js

@@ -5,1 +5,3 @@ exports.StyleResolverMixin = require('./mixins/style-resolver');
 exports.MatchMediaItem = require('./mixins/match-media-item');
+
+exports.Style = require('./components/style');

modules/mixins/match-media-base.js

@@ -24,3 +24,3 @@ var React = require('react');
   init: function (mediaQueryOpts) {
-    if (!mediaQueryOpts) {
+    if (!mediaQueryOpts || typeof window === "undefined") {
       return;
@@ -27,0 +27,0 @@ }

package.json

 {
   "name": "radium",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A set of tools to manage inline styles on React elements",
@@ -19,2 +19,3 @@ "main": "modules/index.js",
   "scripts": {
+    "dist": "webpack && webpack --config=webpack.config.minified.js",
     "examples": "webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples/"
@@ -21,0 +22,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

85603

increased by190.32%

Number of package files

22

increased by15.79%

Lines of code

2199

increased by375.97%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes