thulioph

import React from "react";

import { ModalComponent } from "./Modal";

class ModalContainer extends React.Component {
  state = {
    showModal: false
  };

  onHandleModal = () => {

thulioph

import React from "react";
import PropTypes from "prop-types";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export const ModalComponent = ({
  showModal,
  onHandleModal,
  onBtnSuccess,
  onBtnCancel,
  mainBtnLabel,

thulioph

import React from "react";
import { compose, withState, withHandlers } from "recompose";

import { ModalComponent } from "./Modal";

const hoc = compose(
  withState("showModal", "updateModal", false),
  withHandlers({
    onHandleModal: ({ updateModal, showModal }) => () => updateModal(!showModal),
    onBtnSuccess: () => () => console.warn("Success"),

thulioph

import React from 'react';
import { compose, withState, mapProps } from 'recompose';

const MyComponent = ({ myCounter, setCounter }) => (
  <div>
    <h1>{myCounter}</h1>
    <button onClick={() => setCounter(myCounter + 1)}>Add</button>
    <button onClick={() => setCounter(myCounter - 1)}>Remove</button>
  </div>
);

thulioph

import React from 'react';
import { compose, withState, withHandlers } from 'recompose';

const MyComponent = ({ counter, increment, decrement, reset }) => (
  <div>
    <h2>{counter}</h2>
    <button onClick={increment}>Add</button>
    <button onClick={decrement}>Remove</button>
    <button onClick={reset}>Reset</button>
  </div>

thulioph

import React from 'react';
import { nest } from 'recompose';

const Header = ({ children }) => (
  <div>
    <header>HEY!</header>
    {children}
  </div>
);

thulioph

import React from 'react';
import { branch } from 'recompose';

const MyComponent = () => <h2>Hello!</h2>;

const IsLessThanZero = BaseComponent => props => (
  <div>
    <BaseComponent {...props} />
    <h1>Less or equal than zero!</h1>
  </div>

thulioph

import React from 'react';
import { withState } from 'recompose';

const MyComponent = ({ counter, setCounter }) => (
  <div>
    <h1>{counter}</h1>
    <button onClick={() => setCounter(counter + 1)}>Add</button>
    <button onClick={() => setCounter(counter - 1)}>Remove</button>
  </div>
);

thulioph

import React from 'react';
import { lifecycle } from 'recompose';

const MyComponent = ({ data }) => (
  <div>{data}</div>
);

const MyComponentModified = lifecycle({
  componentDidMount() {
    doSomething().then(data => {

thulioph

Slides

• https://speakerdeck.com/thulioph/styled-components

Code

• Exemplo 01 - Header
• Exemplo 02 - Button
• Exemplo 03 - Card
• Exemplo 04 - App