react-say - npm Package Compare versions

Comparing version 0.0.1-master.4f70cb1 to 0.0.1-master.601b9a7

lib/index.js

@@ -6,3 +6,16 @@ 'use strict';
 });
+exports.SayButton = exports.Say = exports.Context = exports.Composer = undefined;
 
+var _BasicSay = require('./BasicSay');
+
+var _BasicSay2 = _interopRequireDefault(_BasicSay);
+
+var _Composer = require('./Composer');
+
+var _Composer2 = _interopRequireDefault(_Composer);
+
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _Say = require('./Say');
@@ -12,5 +25,13 @@
 
+var _SayButton = require('./SayButton');
+
+var _SayButton2 = _interopRequireDefault(_SayButton);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _Say2.default;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJuYW1lcyI6WyJTYXkiXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBOzs7Ozs7a0JBRWVBLGEiLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgU2F5IGZyb20gJy4vU2F5JztcblxuZXhwb3J0IGRlZmF1bHQgU2F5O1xuIl19
+exports.default = _BasicSay2.default;
+exports.Composer = _Composer2.default;
+exports.Context = _Context2.default;
+exports.Say = _Say2.default;
+exports.SayButton = _SayButton2.default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJuYW1lcyI6WyJCYXNpY1NheSIsIkNvbXBvc2VyIiwiQ29udGV4dCIsIlNheSIsIlNheUJ1dHRvbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7OztrQkFFZUEsa0I7UUFHYkMsUSxHQUFBQSxrQjtRQUNBQyxPLEdBQUFBLGlCO1FBQ0FDLEcsR0FBQUEsYTtRQUNBQyxTLEdBQUFBLG1CIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IEJhc2ljU2F5IGZyb20gJy4vQmFzaWNTYXknO1xuaW1wb3J0IENvbXBvc2VyIGZyb20gJy4vQ29tcG9zZXInO1xuaW1wb3J0IENvbnRleHQgZnJvbSAnLi9Db250ZXh0JztcbmltcG9ydCBTYXkgZnJvbSAnLi9TYXknO1xuaW1wb3J0IFNheUJ1dHRvbiBmcm9tICcuL1NheUJ1dHRvbic7XG5cbmV4cG9ydCBkZWZhdWx0IEJhc2ljU2F5XG5cbmV4cG9ydCB7XG4gIENvbXBvc2VyLFxuICBDb250ZXh0LFxuICBTYXksXG4gIFNheUJ1dHRvblxufVxuIl19

lib/Say.js

@@ -17,2 +17,6 @@ 'use strict';
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,54 +40,29 @@
   _createClass(Say, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.say(this.props);
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.say(this.props);
-    }
-  }, {
     key: 'shouldComponentUpdate',
     value: function shouldComponentUpdate(nextProps) {
-      return true;
+      return nextProps.text !== this.props.text;
     }
   }, {
-    key: 'say',
-    value: function say(_ref) {
-      var lang = _ref.lang,
-          pitch = _ref.pitch,
-          rate = _ref.rate,
-          speechSynthesis = _ref.speechSynthesis,
-          speechSynthesisUtterance = _ref.speechSynthesisUtterance,
-          text = _ref.text,
-          voice = _ref.voice,
-          volume = _ref.volume;
-
-      var utterance = new speechSynthesisUtterance(text);
-
-      if (lang) {
-        utterance.lang = lang;
-      }
-
-      utterance.pitch = pitch;
-      utterance.rate = rate;
-
-      if (voice) {
-        utterance.voice = voice;
-      }
-
-      utterance.volume = volume;
-
-      speechSynthesis.cancel();
-      speechSynthesis.speak(utterance);
-    }
-  }, {
     key: 'render',
     value: function render() {
-      var props = this.props;
-      var children = props.children;
+      var _props = this.props,
+          lang = _props.lang,
+          onBoundary = _props.onBoundary,
+          onEnd = _props.onEnd,
+          onError = _props.onError,
+          onStart = _props.onStart,
+          pitch = _props.pitch,
+          rate = _props.rate,
+          text = _props.text,
+          voice = _props.voice,
+          volume = _props.volume;
 
 
-      return typeof children === 'function' ? children(props) : children;
+      return _react2.default.createElement(
+        _Context2.default.Consumer,
+        null,
+        function (context) {
+          return context.speak({ lang: lang, onBoundary: onBoundary, onEnd: onEnd, onError: onError, onStart: onStart, pitch: pitch, rate: rate, text: text, voice: voice, volume: volume });
+        }
+      );
     }
@@ -98,10 +77,2 @@ }]);
 
-Say.defaultProps = {
-  pitch: 1,
-  rate: 1,
-  speechSynthesis: window.speechSynthesis || window.webkitSpeechSynthesis,
-  speechSynthesisUtterance: window.SpeechSynthesisUtterance || window.webkitSpeechSynthesisUtterance,
-  volume: 1
-};
-
 Say.propTypes = {
@@ -111,7 +82,10 @@ lang: _propTypes2.default.string,
   rate: _propTypes2.default.number,
-  speechSynthesis: _propTypes2.default.any,
-  speechSynthesisUtterance: _propTypes2.default.any,
+  onBoundary: _propTypes2.default.func,
+  onEnd: _propTypes2.default.func,
+  onError: _propTypes2.default.func,
+  onStart: _propTypes2.default.func,
+  text: _propTypes2.default.string,
   voice: _propTypes2.default.any,
   volume: _propTypes2.default.number
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9TYXkuanMiXSwibmFtZXMiOlsiU2F5Iiwic2F5IiwicHJvcHMiLCJuZXh0UHJvcHMiLCJsYW5nIiwicGl0Y2giLCJyYXRlIiwic3BlZWNoU3ludGhlc2lzIiwic3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlIiwidGV4dCIsInZvaWNlIiwidm9sdW1lIiwidXR0ZXJhbmNlIiwiY2FuY2VsIiwic3BlYWsiLCJjaGlsZHJlbiIsIlJlYWN0IiwiQ29tcG9uZW50IiwiZGVmYXVsdFByb3BzIiwid2luZG93Iiwid2Via2l0U3BlZWNoU3ludGhlc2lzIiwiU3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlIiwid2Via2l0U3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlIiwicHJvcFR5cGVzIiwiUHJvcFR5cGVzIiwic3RyaW5nIiwibnVtYmVyIiwiYW55Il0sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7Ozs7Ozs7OztJQUVxQkEsRzs7Ozs7Ozs7Ozs7d0NBQ0M7QUFDbEIsV0FBS0MsR0FBTCxDQUFTLEtBQUtDLEtBQWQ7QUFDRDs7O3lDQUVvQjtBQUNuQixXQUFLRCxHQUFMLENBQVMsS0FBS0MsS0FBZDtBQUNEOzs7MENBRXFCQyxTLEVBQVc7QUFDL0IsYUFBTyxJQUFQO0FBQ0Q7Ozs4QkFXRTtBQUFBLFVBUkRDLElBUUMsUUFSREEsSUFRQztBQUFBLFVBUERDLEtBT0MsUUFQREEsS0FPQztBQUFBLFVBTkRDLElBTUMsUUFOREEsSUFNQztBQUFBLFVBTERDLGVBS0MsUUFMREEsZUFLQztBQUFBLFVBSkRDLHdCQUlDLFFBSkRBLHdCQUlDO0FBQUEsVUFIREMsSUFHQyxRQUhEQSxJQUdDO0FBQUEsVUFGREMsS0FFQyxRQUZEQSxLQUVDO0FBQUEsVUFEREMsTUFDQyxRQUREQSxNQUNDOztBQUNELFVBQU1DLFlBQVksSUFBSUosd0JBQUosQ0FBNkJDLElBQTdCLENBQWxCOztBQUVBLFVBQUlMLElBQUosRUFBVTtBQUNSUSxrQkFBVVIsSUFBVixHQUFpQkEsSUFBakI7QUFDRDs7QUFFRFEsZ0JBQVVQLEtBQVYsR0FBa0JBLEtBQWxCO0FBQ0FPLGdCQUFVTixJQUFWLEdBQWlCQSxJQUFqQjs7QUFFQSxVQUFJSSxLQUFKLEVBQVc7QUFDVEUsa0JBQVVGLEtBQVYsR0FBa0JBLEtBQWxCO0FBQ0Q7O0FBRURFLGdCQUFVRCxNQUFWLEdBQW1CQSxNQUFuQjs7QUFFQUosc0JBQWdCTSxNQUFoQjtBQUNBTixzQkFBZ0JPLEtBQWhCLENBQXNCRixTQUF0QjtBQUNEOzs7NkJBRVE7QUFBQSxVQUNDVixLQURELEdBQ1csSUFEWCxDQUNDQSxLQUREO0FBQUEsVUFFQ2EsUUFGRCxHQUVjYixLQUZkLENBRUNhLFFBRkQ7OztBQUlQLGFBQU8sT0FBT0EsUUFBUCxLQUFvQixVQUFwQixHQUFpQ0EsU0FBU2IsS0FBVCxDQUFqQyxHQUFtRGEsUUFBMUQ7QUFDRDs7OztFQS9DOEJDLGdCQUFNQyxTOztrQkFBbEJqQixHOzs7QUFrRHJCQSxJQUFJa0IsWUFBSixHQUFtQjtBQUNqQmIsU0FBTyxDQURVO0FBRWpCQyxRQUFNLENBRlc7QUFHakJDLG1CQUFpQlksT0FBT1osZUFBUCxJQUEwQlksT0FBT0MscUJBSGpDO0FBSWpCWiw0QkFBMEJXLE9BQU9FLHdCQUFQLElBQW1DRixPQUFPRyw4QkFKbkQ7QUFLakJYLFVBQVE7QUFMUyxDQUFuQjs7QUFRQVgsSUFBSXVCLFNBQUosR0FBZ0I7QUFDZG5CLFFBQU1vQixvQkFBVUMsTUFERjtBQUVkcEIsU0FBT21CLG9CQUFVRSxNQUZIO0FBR2RwQixRQUFNa0Isb0JBQVVFLE1BSEY7QUFJZG5CLG1CQUFpQmlCLG9CQUFVRyxHQUpiO0FBS2RuQiw0QkFBMEJnQixvQkFBVUcsR0FMdEI7QUFNZGpCLFNBQU9jLG9CQUFVRyxHQU5IO0FBT2RoQixVQUFRYSxvQkFBVUU7QUFQSixDQUFoQiIsImZpbGUiOiJTYXkuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGRlZmF1bHQgY2xhc3MgU2F5IGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgdGhpcy5zYXkodGhpcy5wcm9wcyk7XG4gIH1cblxuICBjb21wb25lbnREaWRVcGRhdGUoKSB7XG4gICAgdGhpcy5zYXkodGhpcy5wcm9wcyk7XG4gIH1cblxuICBzaG91bGRDb21wb25lbnRVcGRhdGUobmV4dFByb3BzKSB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cblxuICBzYXkoe1xuICAgIGxhbmcsXG4gICAgcGl0Y2gsXG4gICAgcmF0ZSxcbiAgICBzcGVlY2hTeW50aGVzaXMsXG4gICAgc3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlLFxuICAgIHRleHQsXG4gICAgdm9pY2UsXG4gICAgdm9sdW1lXG4gIH0pIHtcbiAgICBjb25zdCB1dHRlcmFuY2UgPSBuZXcgc3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlKHRleHQpO1xuXG4gICAgaWYgKGxhbmcpIHtcbiAgICAgIHV0dGVyYW5jZS5sYW5nID0gbGFuZztcbiAgICB9XG5cbiAgICB1dHRlcmFuY2UucGl0Y2ggPSBwaXRjaDtcbiAgICB1dHRlcmFuY2UucmF0ZSA9IHJhdGU7XG5cbiAgICBpZiAodm9pY2UpIHtcbiAgICAgIHV0dGVyYW5jZS52b2ljZSA9IHZvaWNlO1xuICAgIH1cblxuICAgIHV0dGVyYW5jZS52b2x1bWUgPSB2b2x1bWU7XG5cbiAgICBzcGVlY2hTeW50aGVzaXMuY2FuY2VsKCk7XG4gICAgc3BlZWNoU3ludGhlc2lzLnNwZWFrKHV0dGVyYW5jZSk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBwcm9wcyB9ID0gdGhpcztcbiAgICBjb25zdCB7IGNoaWxkcmVuIH0gPSBwcm9wcztcblxuICAgIHJldHVybiB0eXBlb2YgY2hpbGRyZW4gPT09ICdmdW5jdGlvbicgPyBjaGlsZHJlbihwcm9wcykgOiBjaGlsZHJlbjtcbiAgfVxufVxuXG5TYXkuZGVmYXVsdFByb3BzID0ge1xuICBwaXRjaDogMSxcbiAgcmF0ZTogMSxcbiAgc3BlZWNoU3ludGhlc2lzOiB3aW5kb3cuc3BlZWNoU3ludGhlc2lzIHx8IHdpbmRvdy53ZWJraXRTcGVlY2hTeW50aGVzaXMsXG4gIHNwZWVjaFN5bnRoZXNpc1V0dGVyYW5jZTogd2luZG93LlNwZWVjaFN5bnRoZXNpc1V0dGVyYW5jZSB8fCB3aW5kb3cud2Via2l0U3BlZWNoU3ludGhlc2lzVXR0ZXJhbmNlLFxuICB2b2x1bWU6IDFcbn07XG5cblNheS5wcm9wVHlwZXMgPSB7XG4gIGxhbmc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHBpdGNoOiBQcm9wVHlwZXMubnVtYmVyLFxuICByYXRlOiBQcm9wVHlwZXMubnVtYmVyLFxuICBzcGVlY2hTeW50aGVzaXM6IFByb3BUeXBlcy5hbnksXG4gIHNwZWVjaFN5bnRoZXNpc1V0dGVyYW5jZTogUHJvcFR5cGVzLmFueSxcbiAgdm9pY2U6IFByb3BUeXBlcy5hbnksXG4gIHZvbHVtZTogUHJvcFR5cGVzLm51bWJlclxufTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9TYXkuanMiXSwibmFtZXMiOlsiU2F5IiwibmV4dFByb3BzIiwidGV4dCIsInByb3BzIiwibGFuZyIsIm9uQm91bmRhcnkiLCJvbkVuZCIsIm9uRXJyb3IiLCJvblN0YXJ0IiwicGl0Y2giLCJyYXRlIiwidm9pY2UiLCJ2b2x1bWUiLCJjb250ZXh0Iiwic3BlYWsiLCJSZWFjdCIsIkNvbXBvbmVudCIsInByb3BUeXBlcyIsIlByb3BUeXBlcyIsInN0cmluZyIsIm51bWJlciIsImZ1bmMiLCJhbnkiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7Ozs7QUFDQTs7OztBQUVBOzs7Ozs7Ozs7Ozs7SUFFcUJBLEc7Ozs7Ozs7Ozs7OzBDQUNHQyxTLEVBQVc7QUFDL0IsYUFBT0EsVUFBVUMsSUFBVixLQUFtQixLQUFLQyxLQUFMLENBQVdELElBQXJDO0FBQ0Q7Ozs2QkFFUTtBQUFBLG1CQUNpRixLQUFLQyxLQUR0RjtBQUFBLFVBQ0NDLElBREQsVUFDQ0EsSUFERDtBQUFBLFVBQ09DLFVBRFAsVUFDT0EsVUFEUDtBQUFBLFVBQ21CQyxLQURuQixVQUNtQkEsS0FEbkI7QUFBQSxVQUMwQkMsT0FEMUIsVUFDMEJBLE9BRDFCO0FBQUEsVUFDbUNDLE9BRG5DLFVBQ21DQSxPQURuQztBQUFBLFVBQzRDQyxLQUQ1QyxVQUM0Q0EsS0FENUM7QUFBQSxVQUNtREMsSUFEbkQsVUFDbURBLElBRG5EO0FBQUEsVUFDeURSLElBRHpELFVBQ3lEQSxJQUR6RDtBQUFBLFVBQytEUyxLQUQvRCxVQUMrREEsS0FEL0Q7QUFBQSxVQUNzRUMsTUFEdEUsVUFDc0VBLE1BRHRFOzs7QUFHUCxhQUNFO0FBQUMseUJBQUQsQ0FBUyxRQUFUO0FBQUE7QUFDSTtBQUFBLGlCQUFXQyxRQUFRQyxLQUFSLENBQWMsRUFBRVYsVUFBRixFQUFRQyxzQkFBUixFQUFvQkMsWUFBcEIsRUFBMkJDLGdCQUEzQixFQUFvQ0MsZ0JBQXBDLEVBQTZDQyxZQUE3QyxFQUFvREMsVUFBcEQsRUFBMERSLFVBQTFELEVBQWdFUyxZQUFoRSxFQUF1RUMsY0FBdkUsRUFBZCxDQUFYO0FBQUE7QUFESixPQURGO0FBS0Q7Ozs7RUFiOEJHLGdCQUFNQyxTOztrQkFBbEJoQixHOzs7QUFnQnJCQSxJQUFJaUIsU0FBSixHQUFnQjtBQUNkYixRQUFNYyxvQkFBVUMsTUFERjtBQUVkVixTQUFPUyxvQkFBVUUsTUFGSDtBQUdkVixRQUFNUSxvQkFBVUUsTUFIRjtBQUlkZixjQUFZYSxvQkFBVUcsSUFKUjtBQUtkZixTQUFPWSxvQkFBVUcsSUFMSDtBQU1kZCxXQUFTVyxvQkFBVUcsSUFOTDtBQU9kYixXQUFTVSxvQkFBVUcsSUFQTDtBQVFkbkIsUUFBTWdCLG9CQUFVQyxNQVJGO0FBU2RSLFNBQU9PLG9CQUFVSSxHQVRIO0FBVWRWLFVBQVFNLG9CQUFVRTtBQVZKLENBQWhCIiwiZmlsZSI6IlNheS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgQ29udGV4dCBmcm9tICcuL0NvbnRleHQnO1xuXG5leHBvcnQgZGVmYXVsdCBjbGFzcyBTYXkgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBzaG91bGRDb21wb25lbnRVcGRhdGUobmV4dFByb3BzKSB7XG4gICAgcmV0dXJuIG5leHRQcm9wcy50ZXh0ICE9PSB0aGlzLnByb3BzLnRleHQ7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgY29uc3QgeyBsYW5nLCBvbkJvdW5kYXJ5LCBvbkVuZCwgb25FcnJvciwgb25TdGFydCwgcGl0Y2gsIHJhdGUsIHRleHQsIHZvaWNlLCB2b2x1bWUgfSA9IHRoaXMucHJvcHM7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPENvbnRleHQuQ29uc3VtZXI+XG4gICAgICAgIHsgY29udGV4dCA9PiBjb250ZXh0LnNwZWFrKHsgbGFuZywgb25Cb3VuZGFyeSwgb25FbmQsIG9uRXJyb3IsIG9uU3RhcnQsIHBpdGNoLCByYXRlLCB0ZXh0LCB2b2ljZSwgdm9sdW1lIH0pIH1cbiAgICAgIDwvQ29udGV4dC5Db25zdW1lcj5cbiAgICApO1xuICB9XG59XG5cblNheS5wcm9wVHlwZXMgPSB7XG4gIGxhbmc6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHBpdGNoOiBQcm9wVHlwZXMubnVtYmVyLFxuICByYXRlOiBQcm9wVHlwZXMubnVtYmVyLFxuICBvbkJvdW5kYXJ5OiBQcm9wVHlwZXMuZnVuYyxcbiAgb25FbmQ6IFByb3BUeXBlcy5mdW5jLFxuICBvbkVycm9yOiBQcm9wVHlwZXMuZnVuYyxcbiAgb25TdGFydDogUHJvcFR5cGVzLmZ1bmMsXG4gIHRleHQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHZvaWNlOiBQcm9wVHlwZXMuYW55LFxuICB2b2x1bWU6IFByb3BUeXBlcy5udW1iZXJcbn07XG4iXX0=

package.json

 {
   "name": "react-say",
-  "version": "0.0.1-master.4f70cb1",
+  "version": "0.0.1-master.601b9a7",
   "description": "A React component that synthesis text into speech using Web Speech API",
@@ -5,0 +5,0 @@ "keywords": [],

README.md

@@ -7,2 +7,62 @@ # react-say
 
+This project scaffold can be found at [`compulim/react-component-template`](https://github.com/compulim/react-component-template).
+
+# Demo
+
+Try out the demo at https://compulim.github.io/react-say/.
+
+# How to use
+
+First, run `npm install react-say` for production build. Or run `npm install react-say@master` for latest development build.
+
+## Simple scenario
+
+The following will speak the text immediately upon showing up. Some browsers may not speak the text until the user interacted with the page.
+
+```jsx
+import BasicSay from 'react-say';
+
+export default props =>
+  <BasicSay
+    text="A quick brown fox jumped over the lazy dogs."
+  />
+```
+
+## Customizing pitch/rate
+
+You may want to customize the speech by varying pitch and rate. You can use `<Composer>` and `<Say>` to say your text.
+
+```jsx
+import { Composer, Say } from 'react-say';
+
+export default props =>
+  <Composer>
+    <Say
+      pitch={ 1.1 }
+      rate={ 1.5 }
+      text="A quick brown fox jumped over the lazy dogs."
+    />
+  </Composer>
+```
+
+> Note: variation will take effect for new/modified `<Say>`
+
+## Say button
+
+Since some browsers may block speak synthesis before the user interacting with the page, you can use `<SayButton>` for the purpose.
+
+```jsx
+import { Composer, SayButton } from 'react-say';
+
+export default props =>
+  <Composer>
+    <SayButton
+      onClick={ event => console.log(event) }
+      text="A quick brown fox jumped over the lazy dogs."
+    >
+      Tell me a story
+    </SayButton>
+  </Composer>
+```
+
 # Contributions
@@ -9,0 +69,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

38381

218.75%

Number of package files

10

66.67%

Lines of code

345

263.16%

Number of lines in readme file

74

428.57%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes