diff --git a/README.md b/README.md index a1a735d..57e6726 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_596 TILs and counting..._ +_597 TILs and counting..._ --- @@ -422,6 +422,7 @@ _596 TILs and counting..._ - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md) - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md) +- [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md) - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md) - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md) - [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md) diff --git a/react/inactive-and-active-component-styles-with-radium.md b/react/inactive-and-active-component-styles-with-radium.md new file mode 100644 index 0000000..a09c7d4 --- /dev/null +++ b/react/inactive-and-active-component-styles-with-radium.md @@ -0,0 +1,45 @@ +# Inactive And Active Component Styles With Radium + +[Radium](https://github.com/FormidableLabs/radium) is "toolchain for React +component styling" allowing you to do comprehensive inline styling with CSS. + +Often times, especially in the case of a series of nav elements, there is a +need to style one element as _active_ while styling the rest as _inactive_. +This can be achieved with Radium by defining two groups of styles (`base` +and `active`) and then relying on props to conditionally apply the active +style. + +```javascript +import React from 'react'; +import Radium from 'radium'; + +const styles = { + base: { + textDecoration: "none", + color: "gray", + }, + active: { + color: "black", + backgroundColor: "lightgray", + }, +}; + +let NavItem = ({ label, path, active }) => { + return ( + {label} + ); +}; + +NavItem = Radium(NavItem); +``` + +With Radium, our `base` (_inactive_) styles always get applied. Then, the +`active` styles only get applied when the `active` prop is true. We produce +a Radium-ified version of our `NavItem` on the last line so that Radium can +handle all of the styling of the component.