Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-fela
Advanced tools
react-fela - npm Package Compare versions
Comparing version 1.0.1 to 2.0.0
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) : | ||
| typeof define === 'function' && define.amd ? define(['react'], factory) : | ||
| (global.ReactFela = factory(global.React)); | ||
| }(this, function (react) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('fela')) : | ||
| typeof define === 'function' && define.amd ? define(['react', 'fela'], factory) : | ||
| (global.ReactFela = factory(global.React,global.Fela)); | ||
| }(this, function (React,fela) { 'use strict'; | ||
| var React__default = 'default' in React ? React['default'] : React; | ||
| var babelHelpers = {}; | ||
@@ -47,27 +49,2 @@ | ||
| babelHelpers.get = function get(object, property, receiver) { | ||
| if (object === null) object = Function.prototype; | ||
| var desc = Object.getOwnPropertyDescriptor(object, property); | ||
| if (desc === undefined) { | ||
| var parent = Object.getPrototypeOf(object); | ||
| if (parent === null) { | ||
| return undefined; | ||
| } else { | ||
| return get(parent, property, receiver); | ||
| } | ||
| } else if ("value" in desc) { | ||
| return desc.value; | ||
| } else { | ||
| var getter = desc.get; | ||
| if (getter === undefined) { | ||
| return undefined; | ||
| } | ||
| return getter.call(receiver); | ||
| } | ||
| }; | ||
| babelHelpers.inherits = function (subClass, superClass) { | ||
@@ -99,4 +76,10 @@ if (typeof superClass !== "function" && superClass !== null) { | ||
| var rendererShape = React.PropTypes.shape({ | ||
| renderFont: React.PropTypes.func.isRequired, | ||
| renderStatic: React.PropTypes.func.isRequired, | ||
| renderRule: React.PropTypes.func.isRequired, | ||
| renderKeyframe: React.PropTypes.func.isRequired | ||
| }); | ||
| function __commonjs(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } | ||
| var rendererShape$1 = rendererShape.isRequired; | ||
@@ -112,7 +95,17 @@ var Provider = function (_Component) { | ||
| babelHelpers.createClass(Provider, [{ | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| var _props = this.props; | ||
| var mountNode = _props.mountNode; | ||
| var renderer = _props.renderer; | ||
| if (mountNode) { | ||
| fela.render(renderer, mountNode); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'getChildContext', | ||
| value: function getChildContext() { | ||
| return { | ||
| fela: this.props.renderer.render.bind(this.props.renderer) | ||
| }; | ||
| return { renderer: this.props.renderer }; | ||
| } | ||
@@ -126,181 +119,14 @@ }, { | ||
| return Provider; | ||
| }(react.Component); | ||
| }(React.Component); | ||
| Provider.propTypes = { renderer: react.PropTypes.object.isRequired }; | ||
| Provider.childContextTypes = { fela: react.PropTypes.func.isRequired }; | ||
| Provider.propTypes = { renderer: rendererShape$1 }; | ||
| Provider.childContextTypes = { renderer: rendererShape$1 }; | ||
| var defaultMapper = function defaultMapper(props) { | ||
| return props; | ||
| }; | ||
| function connect(mapStylesToProps) { | ||
| return function (Comp) { | ||
| var _class, _temp; | ||
| function bindPropsToFela() { | ||
| var mapper = arguments.length <= 0 || arguments[0] === undefined ? defaultMapper : arguments[0]; | ||
| return _temp = _class = function (_Component) { | ||
| babelHelpers.inherits(EnhancedComponent, _Component); | ||
| return function (component) { | ||
| // handle functional Components | ||
| if (!component.prototype.setState) { | ||
| var enhancedComponent = function enhancedComponent(props, context) { | ||
| var fela = function fela(selector, additionalProps, plugins) { | ||
| return context.fela(selector, additionalProps ? babelHelpers.extends({}, mapper(props), additionalProps) : mapper(props), plugins); | ||
| }; | ||
| return component(babelHelpers.extends({}, props, { fela: fela }), context); | ||
| }; | ||
| enhancedComponent.contextTypes = babelHelpers.extends({}, component.contextTypes, { | ||
| fela: react.PropTypes.func.isRequired | ||
| }); | ||
| return enhancedComponent; | ||
| } | ||
| // handle stateful class Components | ||
| var EnhancedComponent = function (_component) { | ||
| babelHelpers.inherits(EnhancedComponent, _component); | ||
| function EnhancedComponent(props, context) { | ||
| babelHelpers.classCallCheck(this, EnhancedComponent); | ||
| var _this = babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(EnhancedComponent).call(this, props, context)); | ||
| _this.fela = function (selector, additionalProps, plugins) { | ||
| return context.fela(selector, additionalProps ? babelHelpers.extends({}, mapper(props), additionalProps) : mapper(props), plugins); | ||
| }; | ||
| return _this; | ||
| } | ||
| return EnhancedComponent; | ||
| }(component); | ||
| EnhancedComponent.contextTypes = babelHelpers.extends({}, component.contextTypes, { | ||
| fela: react.PropTypes.func.isRequired | ||
| }); | ||
| return EnhancedComponent; | ||
| }; | ||
| } | ||
| var emptyFunction = __commonjs(function (module) { | ||
| "use strict"; | ||
| /** | ||
| * Copyright (c) 2013-present, Facebook, Inc. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * | ||
| */ | ||
| function makeEmptyFunction(arg) { | ||
| return function () { | ||
| return arg; | ||
| }; | ||
| } | ||
| /** | ||
| * This function accepts and discards inputs; it has no side effects. This is | ||
| * primarily useful idiomatically for overridable function endpoints which | ||
| * always need to be callable, since JS lacks a null-call idiom ala Cocoa. | ||
| */ | ||
| var emptyFunction = function emptyFunction() {}; | ||
| emptyFunction.thatReturns = makeEmptyFunction; | ||
| emptyFunction.thatReturnsFalse = makeEmptyFunction(false); | ||
| emptyFunction.thatReturnsTrue = makeEmptyFunction(true); | ||
| emptyFunction.thatReturnsNull = makeEmptyFunction(null); | ||
| emptyFunction.thatReturnsThis = function () { | ||
| return this; | ||
| }; | ||
| emptyFunction.thatReturnsArgument = function (arg) { | ||
| return arg; | ||
| }; | ||
| module.exports = emptyFunction; | ||
| }); | ||
| var require$$0 = (emptyFunction && typeof emptyFunction === 'object' && 'default' in emptyFunction ? emptyFunction['default'] : emptyFunction); | ||
| var warning = __commonjs(function (module) { | ||
| /** | ||
| * Copyright 2014-2015, Facebook, Inc. | ||
| * All rights reserved. | ||
| * | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| */ | ||
| 'use strict'; | ||
| var emptyFunction = require$$0; | ||
| /** | ||
| * Similar to invariant but only logs a warning if the condition is not met. | ||
| * This can be used to log issues in development environments in critical | ||
| * paths. Removing the logging code for production environments will keep the | ||
| * same logic and follow the same code paths. | ||
| */ | ||
| var warning = emptyFunction; | ||
| if (true) { | ||
| warning = function warning(condition, format) { | ||
| for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { | ||
| args[_key - 2] = arguments[_key]; | ||
| } | ||
| if (format === undefined) { | ||
| throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); | ||
| } | ||
| if (format.indexOf('Failed Composite propType: ') === 0) { | ||
| return; // Ignore CompositeComponent proptype check. | ||
| } | ||
| if (!condition) { | ||
| var argIndex = 0; | ||
| var message = 'Warning: ' + format.replace(/%s/g, function () { | ||
| return args[argIndex++]; | ||
| }); | ||
| if (typeof console !== 'undefined') { | ||
| console.error(message); | ||
| } | ||
| try { | ||
| // --- Welcome to debugging React --- | ||
| // This error was thrown as a convenience so that you can use this stack | ||
| // to find the callsite that caused this warning to fire. | ||
| throw new Error(message); | ||
| } catch (x) {} | ||
| } | ||
| }; | ||
| } | ||
| module.exports = warning; | ||
| }); | ||
| var warning$1 = (warning && typeof warning === 'object' && 'default' in warning ? warning['default'] : warning); | ||
| var defaultMapper$1 = function defaultMapper(state) { | ||
| return state; | ||
| }; | ||
| function bindStateToFela() { | ||
| var mapper = arguments.length <= 0 || arguments[0] === undefined ? defaultMapper$1 : arguments[0]; | ||
| return function (component) { | ||
| // handle functional Components | ||
| if (!component.prototype.setState) { | ||
| warning$1(false, 'Binding state to Fela does not work with functional Components. They do not have state at all.'); | ||
| return component; | ||
| } | ||
| // handle stateful class Components | ||
| var EnhancedComponent = function (_component) { | ||
| babelHelpers.inherits(EnhancedComponent, _component); | ||
| function EnhancedComponent() { | ||
@@ -313,19 +139,15 @@ babelHelpers.classCallCheck(this, EnhancedComponent); | ||
| key: 'render', | ||
| // reuse the initial displayName name | ||
| value: function render() { | ||
| var _this2 = this; | ||
| // invoke props and renderer to render all styles | ||
| var styles = mapStylesToProps(this.props)(this.context.renderer); | ||
| this.fela = function (selector, additionalProps, plugins) { | ||
| return _this2.context.fela(selector, additionalProps ? babelHelpers.extends({}, mapper(_this2.state, _this2.props), additionalProps) : mapper(_this2.state, _this2.props), plugins); | ||
| }; | ||
| return babelHelpers.get(Object.getPrototypeOf(EnhancedComponent.prototype), 'render', this).call(this); | ||
| return React__default.createElement(Comp, babelHelpers.extends({}, this.props, { styles: styles })); | ||
| } | ||
| }]); | ||
| return EnhancedComponent; | ||
| }(component); | ||
| EnhancedComponent.contextTypes = babelHelpers.extends({}, component.contextTypes, { | ||
| fela: react.PropTypes.func.isRequired | ||
| }); | ||
| return EnhancedComponent; | ||
| }(React.Component), _class.displayName = Comp.displayName || Comp.name || 'Component', _class.contextTypes = babelHelpers.extends({}, Comp.contextTypes, { | ||
| renderer: rendererShape$1 | ||
| }), _temp; | ||
| }; | ||
@@ -336,4 +158,3 @@ } | ||
| Provider: Provider, | ||
| bindPropsToFela: bindPropsToFela, | ||
| bindStateToFela: bindStateToFela | ||
| connect: connect | ||
| }; | ||
@@ -340,0 +161,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactFela=t(e.React)}(this,function(e){"use strict";function t(e,t){return t={exports:{}},e(t,t.exports),t.exports}function r(){var t=arguments.length<=0||void 0===arguments[0]?i:arguments[0];return function(r){if(!r.prototype.setState){var n=function(e,n){var u=function(r,u,i){return n.fela(r,u?o["extends"]({},t(e),u):t(e),i)};return r(o["extends"]({},e,{fela:u}),n)};return n.contextTypes=o["extends"]({},r.contextTypes,{fela:e.PropTypes.func.isRequired}),n}var u=function(e){function r(e,n){o.classCallCheck(this,r);var u=o.possibleConstructorReturn(this,Object.getPrototypeOf(r).call(this,e,n));return u.fela=function(r,u,i){return n.fela(r,u?o["extends"]({},t(e),u):t(e),i)},u}return o.inherits(r,e),r}(r);return u.contextTypes=o["extends"]({},r.contextTypes,{fela:e.PropTypes.func.isRequired}),u}}function n(){var t=arguments.length<=0||void 0===arguments[0]?a:arguments[0];return function(r){if(!r.prototype.setState)return r;var n=function(e){function r(){return o.classCallCheck(this,r),o.possibleConstructorReturn(this,Object.getPrototypeOf(r).apply(this,arguments))}return o.inherits(r,e),o.createClass(r,[{key:"render",value:function(){var e=this;return this.fela=function(r,n,u){return e.context.fela(r,n?o["extends"]({},t(e.state,e.props),n):t(e.state,e.props),u)},o.get(Object.getPrototypeOf(r.prototype),"render",this).call(this)}}]),r}(r);return n.contextTypes=o["extends"]({},r.contextTypes,{fela:e.PropTypes.func.isRequired}),n}}var o={};o.classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o.createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),o["extends"]=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.get=function p(e,t,r){null===e&&(e=Function.prototype);var n=Object.getOwnPropertyDescriptor(e,t);if(void 0===n){var o=Object.getPrototypeOf(e);return null===o?void 0:p(o,t,r)}if("value"in n)return n.value;var u=n.get;if(void 0!==u)return u.call(r)},o.inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},o.possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};var u=function(e){function t(){return o.classCallCheck(this,t),o.possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return o.inherits(t,e),o.createClass(t,[{key:"getChildContext",value:function(){return{fela:this.props.renderer.render.bind(this.props.renderer)}}},{key:"render",value:function(){return this.props.children}}]),t}(e.Component);u.propTypes={renderer:e.PropTypes.object.isRequired},u.childContextTypes={fela:e.PropTypes.func.isRequired};var i=function(e){return e},s=t(function(e){function t(e){return function(){return e}}var r=function(){};r.thatReturns=t,r.thatReturnsFalse=t(!1),r.thatReturnsTrue=t(!0),r.thatReturnsNull=t(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r}),c=s&&"object"==typeof s&&"default"in s?s["default"]:s,a=(t(function(e){var t=c,r=t;e.exports=r}),function(e){return e}),f={Provider:u,bindPropsToFela:r,bindStateToFela:n};return f}); | ||
| !function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react"),require("fela")):"function"==typeof define&&define.amd?define(["react","fela"],r):e.ReactFela=r(e.React,e.Fela)}(this,function(e,r){"use strict";function t(r){return function(t){var i,u;return u=i=function(e){function i(){return o.classCallCheck(this,i),o.possibleConstructorReturn(this,Object.getPrototypeOf(i).apply(this,arguments))}return o.inherits(i,e),o.createClass(i,[{key:"render",value:function(){var e=r(this.props)(this.context.renderer);return n.createElement(t,o["extends"]({},this.props,{styles:e}))}}]),i}(e.Component),i.displayName=t.displayName||t.name||"Component",i.contextTypes=o["extends"]({},t.contextTypes,{renderer:s}),u}}var n="default"in e?e["default"]:e,o={};o.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},o.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),o["extends"]=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},o.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},o.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r};var i=e.PropTypes.shape({renderFont:e.PropTypes.func.isRequired,renderStatic:e.PropTypes.func.isRequired,renderRule:e.PropTypes.func.isRequired,renderKeyframe:e.PropTypes.func.isRequired}),s=i.isRequired,u=function(e){function t(){return o.classCallCheck(this,t),o.possibleConstructorReturn(this,Object.getPrototypeOf(t).apply(this,arguments))}return o.inherits(t,e),o.createClass(t,[{key:"componentWillMount",value:function(){var e=this.props,t=e.mountNode,n=e.renderer;t&&r.render(n,t)}},{key:"getChildContext",value:function(){return{renderer:this.props.renderer}}},{key:"render",value:function(){return this.props.children}}]),t}(e.Component);u.propTypes={renderer:s},u.childContextTypes={renderer:s};var c={Provider:u,connect:t};return c}); |
@@ -11,2 +11,10 @@ 'use strict'; | ||
| var _fela = require('fela'); | ||
| var _rendererShape = require('../utils/rendererShape'); | ||
| var _rendererShape2 = _interopRequireDefault(_rendererShape); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -28,7 +36,17 @@ | ||
| _createClass(Provider, [{ | ||
| key: 'componentWillMount', | ||
| value: function componentWillMount() { | ||
| var _props = this.props; | ||
| var mountNode = _props.mountNode; | ||
| var renderer = _props.renderer; | ||
| if (mountNode) { | ||
| (0, _fela.render)(renderer, mountNode); | ||
| } | ||
| } | ||
| }, { | ||
| key: 'getChildContext', | ||
| value: function getChildContext() { | ||
| return { | ||
| fela: this.props.renderer.render.bind(this.props.renderer) | ||
| }; | ||
| return { renderer: this.props.renderer }; | ||
| } | ||
@@ -45,7 +63,5 @@ }, { | ||
| Provider.propTypes = { renderer: _rendererShape2.default }; | ||
| Provider.childContextTypes = { renderer: _rendererShape2.default }; | ||
| exports.default = Provider; | ||
| Provider.propTypes = { renderer: _react.PropTypes.object.isRequired }; | ||
| Provider.childContextTypes = { fela: _react.PropTypes.func.isRequired }; | ||
| module.exports = exports['default']; |
@@ -11,10 +11,6 @@ 'use strict'; | ||
| var _bindPropsToFela = require('./helpers/bindPropsToFela'); | ||
| var _connect = require('./components/connect'); | ||
| var _bindPropsToFela2 = _interopRequireDefault(_bindPropsToFela); | ||
| var _connect2 = _interopRequireDefault(_connect); | ||
| var _bindStateToFela = require('./helpers/bindStateToFela'); | ||
| var _bindStateToFela2 = _interopRequireDefault(_bindStateToFela); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -24,5 +20,4 @@ | ||
| Provider: _Provider2.default, | ||
| bindPropsToFela: _bindPropsToFela2.default, | ||
| bindStateToFela: _bindStateToFela2.default | ||
| connect: _connect2.default | ||
| }; | ||
| module.exports = exports['default']; |
| { | ||
| "name": "react-fela", | ||
| "version": "1.0.1", | ||
| "version": "2.0.0", | ||
| "description": "React bindings for Fela", | ||
@@ -26,5 +26,2 @@ "repository": "https://github.com/rofrischmann/react-fela/", | ||
| "dist": "cross-env NODE_ENV=production babel-node scripts/buildPackage && cross-env NODE_ENV=development babel-node scripts/buildPackage", | ||
| "example": "webpack-dev-server --config --no-info --content-base ./example/", | ||
| "example:server": "babel-node example/server.js", | ||
| "example:universal": "concurrent --kill-others \"npm run example\" \"npm run example:server\"", | ||
| "lint": "eslint modules", | ||
@@ -36,3 +33,4 @@ "prepare": "npm run lint && npm test && npm run dist && npm run babel", | ||
| "peerDependencies": { | ||
| "react": "^15.1.0" | ||
| "react": "^15.1.0", | ||
| "fela": "^1.0.0-beta.2" | ||
| }, | ||
@@ -45,2 +43,3 @@ "devDependencies": { | ||
| "babel-plugin-add-module-exports": "^0.1.2", | ||
| "babel-plugin-transform-class-properties": "^6.9.1", | ||
| "babel-plugin-transform-dev-warning": "^0.1.0", | ||
@@ -74,3 +73,3 @@ "babel-plugin-transform-node-env-inline": "^6.8.0", | ||
| "express-http-proxy": "^0.6.0", | ||
| "fela": "^1.0.0-alpha.7", | ||
| "fela": "^1.0.0-beta.2", | ||
| "fela-plugin-fallback-value": "^1.0.0-alpha.5", | ||
@@ -100,3 +99,4 @@ "fela-plugin-prefixer": "^1.0.0-alpha.5", | ||
| "add-module-exports", | ||
| "transform-dev-warning" | ||
| "transform-dev-warning", | ||
| "transform-class-properties" | ||
| ] | ||
@@ -103,0 +103,0 @@ }, |
118
README.md
@@ -1,12 +0,11 @@ | ||
| <h1 align="center">React Fela</h1> | ||
| <p align="center"> | ||
| # React Fela | ||
| Official React bindings for Fela. | ||
| <br> | ||
| <img alt="TravisCI" src="https://travis-ci.org/rofrischmann/react-fela.svg?branch=master"> | ||
| <a href="https://codeclimate.com/github/rofrischmann/react-fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/react-fela/badges/coverage.svg"></a> | ||
| <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-fela.svg"> | ||
| <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-~1.4kb-brightgreen.svg"> | ||
| <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-~1.0kb-brightgreen.svg"> | ||
| </p> | ||
| <br> | ||
| This package only includes React bindings for [ Fela](http://github.com/rofrischmann/fela). <br> | ||
@@ -23,107 +22,24 @@ It assumes you already know about Fela and how to use it. | ||
| The package is also available on [npmcdn](https://npmcdn.com/) for those not using npm. | ||
| > You need to include React and Fela on your own as well. | ||
| Assuming you are using [npm](https://www.npmjs.com) as your package mananger you can basically just `npm install` all packages. <br> | ||
| Otherwise we also provide [UMD](https://github.com/umdjs/umd) builds for each package within the `dist` folder. You can easily use them via [npmcdn](https://npmcdn.com/). | ||
| > **Caution**: You need to include both React and Fela on your own as well. | ||
| ```HTML | ||
| <!-- Development build (with warnings) --> | ||
| <script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.js"></script> | ||
| <script src="https://npmcdn.com/react-fela@2.0.0/dist/react-fela.js"></script> | ||
| <!-- Production build (minified) --> | ||
| <script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.min.js"></script> | ||
| <script src="https://npmcdn.com/react-fela@2.0.0/dist/react-fela.min.js"></script> | ||
| ``` | ||
| ## API | ||
| ### `<Provider renderer>` | ||
| **Renderer\<renderer>** | ||
| ## Documentation | ||
| #### [API reference](docs/api) | ||
| * [`<Provider>`](docs/api/Provider.md) | ||
| * [`connect(mapStylesToProps)`](docs/api/connect.md) | ||
| The `<Provider>` component should wrap your whole application. It only accepts a single prop which is your [Fela Renderer](https://github.com/rofrischmann/fela/blob/master/docs/GettingStarted.md#8-rendering).<br> | ||
| It uses React's context to pass down the Renderer's render function. It actually is all you need to fully use Fela within your React application. | ||
| ```javascript | ||
| import { Provider } from 'react-fela' | ||
| import { render } from 'react-dom' | ||
| import React from 'react' | ||
| ## Usage | ||
| For more information and best practices on how to effectively use this package, please check out the main [Fela documention](http://fela.js.org). There you will also find some usage examples. This package only contains the pure API reference documentation. | ||
| const renderer = new Renderer(mountNode, { /* config */}) | ||
| render( | ||
| <Provider renderer={renderer}> | ||
| <App /> | ||
| </Provider>, | ||
| document.getElementById('app') | ||
| ) | ||
| ``` | ||
| Your components can now directly use the render function as `fela`. | ||
| ```javascript | ||
| import React, { PropTypes } from 'react' | ||
| // You may also use stateful class Components | ||
| // and call fela from this.context | ||
| const App = (props, { fela }) => { | ||
| const className = fela(selector, { color: 'blue' }) | ||
| return ( | ||
| <div className={className}> | ||
| I am blue. (Da ba dee da ba di) | ||
| </div> | ||
| ) | ||
| } | ||
| App.contextTypes = { fela: PropTypes.func } | ||
| export default App | ||
| const selector = props => ({ | ||
| fontSize: '12px', | ||
| fontWeight: 300, | ||
| color: props.color, | ||
| padding: '10px' | ||
| }) | ||
| ``` | ||
| ## Helper HoCs | ||
| I have found that there are some recurring patterns on how to actually render your selectors and keyframes. To simplify those, this package provides two HoCs ([Higher-order Components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.njbld18x8)). | ||
| > They only help to write clean and readable code. You do not have to use them nor do they ship any new feature you could not accomplish without. | ||
| ### `bindPropsToFela(mapper)` | ||
| **Function?\<mapper>** | ||
| Used to automatically bind the component's props to the render function. This especially fits well if you follow the pattern of [presentational and container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.2vftfin5s) as the props passed to your component basically describe how a presentational component looks like. It passes the modified render function via props.<br> | ||
| Optionally pass a custom mapper to alter the shape of the props passed to Fela. | ||
| ```javascript | ||
| // passes the props with the exact same keys | ||
| const EnhancedApp = bindPropsToFela()(App) | ||
| const mapper = props => ({ | ||
| marginTop: props.top, | ||
| fontSize: props.size | ||
| }) | ||
| // uses an additional mapper to alter the shape | ||
| // e.g. Component's `top` prop is passed as `marginTop` | ||
| const EnhancedApp = bindPropsToFela(mapper)(App) | ||
| ``` | ||
| ### `bindStateToFela(mapper)` | ||
| **Function?\<mapper>** | ||
| Similar to `bindPropsToFela` but with a more dynamic nature. It binds the current component state to Fela's render function.<br> | ||
| This is especially useful if you want to modify styles based on user input or user interaction. It adds the modified render function to the component itself (`this.fela`).<br> | ||
| You may also pass a mapper to alter the shape. It also accepts the component's props as second parameter. | ||
| > It only works with stateful class components as functional components do not have state at all. | ||
| ```javascript | ||
| const EnhancedApp = bindStateToFela()(App) | ||
| const mapper = (state, props) => ({ | ||
| fontSize: state.size, | ||
| paddingLeft: props.padding, | ||
| paddingRight: props.padding | ||
| }) | ||
| const EnhancedApp = bindStateToFela(mapper)(App) | ||
| ``` | ||
| # License | ||
| ## License | ||
| Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br> | ||
| Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br> | ||
| Created with ♥ by [@rofrischmann](http://rofrischmann.de). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by20%
12
Worsened metrics
- Total package byte prevSize
- decreased by-21.73%
46110
- Dependency count
- increased by50%
3
- Dev dependency count
- increased by2.04%
50
- Lines of code
- decreased by-18.87%
344
- Number of lines in readme file
- decreased by-65.12%
45
No dependency changes