rofrischmann/react-look

View on GitHub
packages/react-look/docs/plugins/FriendlyClassName.md

Summary

Maintainability
Test Coverage
# Friendly className
It will transform your `className`s created with `StyleSheet.create` into readable, debug-friendly & namespaced classNames to be able to debug as easy as possible.

## Example
Let's say we got a Component named `Button` which just renders 2 nested divs with classNames.
Without the devTool you will get incrementing classNames generated by the [StyleContainer](../api/StyleContainer.md).
```HTML
<div class="c0">
  <div class="c1"></div>
</div>
```
Using the devTool will transform them with the `${Component}-${element.type}-${className}`:
```HTML
<div class="Button-div--c0">
  <div class="Button-div--c1"></div>
</div>
```