srph

<SomeComponent.Footer>
  {(slotProps) =>
    <div>{slotProps.loading ? 'Loading...' : null}</div>
  }
</SomeComponent.Footer>

srph

// Needs Google Spreadsheets PowerTools
=COUNTA(valuesByColor("#f4cccc", "", B4:E4))

srph

const styling = {
  Container: style.div`
    padding: 16px;
    ${props => props.isBig && css`
        padding: 32px;
    `}
  `,
  Heading: styled.div`
    display: flex;
  `,

srph

// ++++++++++++++++
// ++            ++
// + +          + +
// +  +        +  +
// +   +      +   +
// +    +    +    +
// +     +  +     +
// +      ++      +
// +     +  +     +
// +    +    +    +

srph

const layout = (
  <BaseLayout>
    <BaseLayout.Header>
      <h1>Here might be a page title</h1>
    </BaseLayout.Header>

    <BaseLayout.Body>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </BaseLayout.Body>

srph

function Header() {
  return null
}

function Body() {
  return null
}

function Footer() {
  return null

srph

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>

srph

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>

srph

<MyPopover open={this.state.open}
  onOpen={this.handleOpen}
  onClose={this.handleClose}
  renderButton={<button>Click!</button>}>
  <h1>My Popover!!</h1>
</MyPopover>

srph

/**
 * Converts an array-like object into an array.
 * Array.from doesn't work if an object doesn't have a "length" property.
 * e.g., Array.from({ 0: 1 }) doesn't work; Array.from({ 0: 1, length: 1 }) does.
 */
function arrayFrom (obj: {}): Array<*> {
    return Object.keys(obj).reduce((set: Array, key: string) => {
        return [...set, obj[key]]
    }, [])
}