├── demo.gif
├── render_flash_mixin.coffee
├── license.txt
└── README.md


/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/elliottkember/render-flash-mixin/HEAD/demo.gif


--------------------------------------------------------------------------------
/render_flash_mixin.coffee:
--------------------------------------------------------------------------------
 1 | RenderFlashMixin =
 2 | 
 3 |   _flash: (colour) ->
 4 |     if @isMounted() # and process.env.NODE_ENV != 'production'
 5 |       @_show_flash(colour)
 6 |       setTimeout @_hide_flash, 400
 7 | 
 8 |   _show_flash: (colour) ->
 9 |     $j(@getDOMNode()).css({'outline': "2px solid #{colour}"})
10 | 
11 |   _hide_flash: ->
12 |     $j(@getDOMNode()).css({'outline': "none"}) if @isMounted()
13 | 
14 |   componentDidMount: ->
15 |     @_flash('red')
16 | 
17 |   componentDidUpdate: ->
18 |     @_flash('green')
19 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015 Dropbox, Inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # render-flash-mixin
 2 | A React mixin for visualising component rendering.
 3 | 
 4 | Ever wondered what your React components are really up to? This handy mixin allows you to highlight your components every time they call componentDidUpdate and componentDidMount. This makes it much easier to spot components that are rendering themselves unnecessarily and causing performance bottlenecks.
 5 | 
 6 | ![Animated demo](demo.gif)
 7 | 
 8 | # Usage
 9 | ```coffeescript
10 | MyComponent = React.createClass
11 |   mixins: [RenderFlashMixin]
12 | ```
13 | # Monkey-patching usage
14 | This automagically applies this mixin to all your React components.
15 | 
16 | ```coffeescript
17 | originalReactClass = React.createClass
18 |     React.createClass = (obj) ->
19 |       obj.mixins = obj.mixins || []
20 |       obj.mixins.push(RenderFlashMixin)
21 |       originalReactClass(obj)
22 | ```
23 | # Green everywhere?
24 | If your components are calling componentDidUpdate too often, you may want to implement [shouldComponentUpdate](http://buildwithreact.com/article/optimizing-with-shouldcomponentupdate).
25 | # Red everywhere?
26 | If your components are calling componentDidMount too often, you may not have specified a ["key" attribute](http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/). Otherwise, your components may be removed and reinitialized between renders.
27 | 


--------------------------------------------------------------------------------