309 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
310 |
311 |
312 |
313 |
314 |
315 |
316 | ```
317 |
318 | With eager evaluation all the HOC are collapsed into one component instance. This helps achieve better performance since a fewer component instances are created. Also, it should help with debugging since the component tree is much flatter.
319 |
320 | ```js
321 |
322 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
323 |
324 | ```
325 |
326 | For more info see this [talk by Andrew Clark](https://youtu.be/zD_judE-bXk?t=19m10s)
327 |
328 |
329 |
330 | ## Example
331 |
332 | We are going to replicate this [Product Card](http://tachyons.io/components/cards/product-card/index.html). We start by creating some base components by enhancing HTML elements using tachyons-measured HOCs.
333 |
334 | ```js
335 | export const Block = withMeasured(clrs)('div');
336 | export const Article = withMeasured(clrs)('article');
337 | export const Heading = withMeasured(clrs)('h1');
338 |
339 | export const Text = compose(
340 | withDefaults({ f: 5, lh: 'copy' }),
341 | withMeasured(clrs),
342 | )('p');
343 |
344 | export const Media = compose(
345 | withBorder(clrs),
346 | withSize,
347 | withSpacing,
348 | withBaseStyles('db'),
349 | )('img');
350 | ```
351 |
352 | The `` component is simply the `` component with some default styles applied to it. Therefore, we can create the `` by wrapping `` with the `withDefaults` HOC.
353 |
354 | ```js
355 | export const ProductCard = withDefaults({
356 | ba: 'black-10',
357 | radius: 2,
358 | bg: 'white',
359 | color: 'dark-gray',
360 | })(Article);
361 | ```
362 |
363 | Finally, we combine them all together to create the ``.
364 |
365 | ```js
366 | export const CatProductCard = props => (
367 |
368 |
369 |
375 |
376 |
377 |
378 |
379 |
383 | Cat
384 |
385 | $1,000
386 |
387 |
388 |
393 | If it fits, i sits burrow under covers. Destroy couch leave hair
394 | everywhere, and touch water with paw then recoil in horror.
395 |
396 |
397 |
398 |
399 | );
400 | ```
401 |
402 | We are passing all `props` from `` to ``. This means when we are using `` we can use props to control the styles for a specific instance. For example:
403 |
404 | ```js
405 |
409 | ```
410 |
411 | 🎏 See the full code for the example here [tachyons-measured demo](https://pushy-spirit.glitch.me)
412 |
413 | 🚨 For more examples see the `examples` directory.
414 |
415 |
416 | ## Why?
417 |
418 | 1. It allows you to quickly create styled and/or stateless functional UI components which use tachyons for styling.
419 |
420 | 2. It helps break up the styles into multiple props. This avoids `className` from becoming long and hard to read.
421 |
422 | ```js
423 |
429 | ```
430 |
431 | 3. It enforces typechecking using `propTypes`. This helps catch values not supported by tachyons.
432 |
433 | 4. It makes it easier to provide defaults (see the explanation below).
434 |
435 | When building components we often want to provide some base styling and then allow the user to override some of that styling. This can be challenging to achieve by providing all the overriding-styles through one prop. For example:
436 |
437 | ```js
438 | const Button = ({ className, ...props}) => {
439 | const styles = classNames('f6', 'link', 'dim', 'br1', 'bn',
440 | 'ph3', 'pv2', 'mb2', 'dib', 'bg-green', 'white', className);
441 |
442 | return (
443 |
444 | );
445 | };
446 | ```
447 |
448 | This component provides all the base-styles. Including the default background and text colours. There are many ways to do this however, for this particular example I'm using `classNames`.
449 |
450 | ```js
451 | // Will render with green background and white text
452 |
453 | // Will render with blue background and white text
454 |
455 | // Will render with green background and white text
456 |
457 | ```
458 |
459 | You might notice a problem with the above scenario. The first two buttons will render as expected however, the third one will not. This is because in tachyons CSS `.bg-green` is defined after `.bg-red` so it will take precedence.
460 |
461 | ```css
462 | /* Background colors */
463 | .bg-red { background-color: #ff4136; }
464 | ...
465 | .bg-green { background-color: #19a974; }
466 | ...
467 | .bg-blue { background-color: #357edd; }
468 | ```
469 |
470 | In order to get around this we can expose `background` and `color` as props.
471 |
472 | ```js
473 | const Button = ({
474 | bgColor = 'bg-green',
475 | color = 'white',
476 | className,
477 | ...props
478 | }) => {
479 | const styles = classNames('f6', 'link', 'dim', 'br1', 'bn',
480 | 'ph3', 'pv2', 'mb2', 'dib', bgColor, color, className);
481 |
482 | return (
483 |
484 | );
485 | };
486 | ```
487 |
488 | full example: [codepen.io/winkerVSbecks/pen/LWBLYb](http://codepen.io/winkerVSbecks/pen/LWBLYb?editors=0010)
489 |
490 |
491 | ## Inspired by and Related to
492 |
493 | + [tachyons-react](https://github.com/tachyons-react/tachyons-react)
494 | + [tachyons](https://github.com/tachyons-css/tachyons)
495 | + [github.com/jxnblk/rebass](https://github.com/jxnblk/rebass)
496 | + [github.com/acdlite/recompose](https://github.com/acdlite/recompose)
497 |
498 |
499 | ## Feedback
500 | This is still in the early stages. Any feedback and bug reports are much appreciated. Please submit them [here](https://github.com/winkerVSbecks/tachyons-measured/issues) or reach out to me on [twitter](https://twitter.com/winkerVSbecks).
501 |
--------------------------------------------------------------------------------