Mailspring/docs/UnsafeComponent.html

---
layout: docs
title: UnsafeComponent
---

<h2>Summary</h2>

<div class="markdown-from-sourecode">
  <p><p>Renders a component provided via the <code>component</code> prop, and ensures that
failures in the component&#39;s code do not cause state inconsistencies elsewhere in
the application. This component is used by <a href='injectedcomponent.html'>InjectedComponent</a> and
<a href='injectedcomponentset.html'>InjectedComponentSet</a> to isolate third party code that could be buggy.</p>
<p>Occasionally, having your component wrapped in <a href='unsafecomponent.html'>UnsafeComponent</a> can cause style
issues. For example, in a Flexbox, the <code>div.unsafe-component-wrapper</code> will cause
your <code>flex</code> and <code>order</code> values to be one level too deep. For these scenarios,
UnsafeComponent looks for <code>containerStyles</code> on your React component and attaches
them to the wrapper div:</p>
<pre><code class="lang-coffee"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>
</span>  <span class="hljs-annotation">@displayName</span>: <span class="hljs-symbol">'MyComponen</span>t'
  <span class="hljs-annotation">@containerStyles</span>:
    flex: <span class="hljs-number">1</span>
    order: <span class="hljs-number">2</span>
</code></pre>
</p>
</div>

<ul>
</ul>


    <h3>Class Properties</h3>

    <h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
    <p><p>React <code>props</code> supported by UnsafeComponent:</p>
    </p>
        <table class="arguments">
            <tr>
              <td style="width:15%;">
                <em>component</em>
              </td>
              <td>
                
                <p>The <a href='https://facebook.github.io/react/docs/component-api.html'>React.Component</a> to display. All other props will be passed on to this component.</p>
    
              </td>
            </tr>
        </table>