Element.jsx

import { css } from "@amory/style"
import { motion } from "framer-motion"
import { createElement } from "react"

export const Element = ({
  animate,
  as = "div",
  className,
  custom,
  drag,
  exit,
  initial,
  layout,
  layoutId,
  style,
  styles,
  transformTemplate,
  transition,
  variants,
  whileDrag,
  whileFocus,
  whileHover,
  whileTap,
  ...props
}) =>
  createElement (
    animate ||
    custom ||
    drag ||
    exit ||
    initial ||
    layout ||
    layoutId ||
    style ||
    transformTemplate ||
    transition ||
    variants ||
    whileDrag ||
    whileFocus ||
    whileHover ||
    whileTap
      ? motion (as)
      : as,
    {
      animate,
      className: css (styles, className),
      custom,
      drag,
      exit,
      initial,
      layout,
      layoutId,
      style,
      transformTemplate,
      transition,
      variants,
      whileDrag,
      whileFocus,
      whileHover,
      whileTap,
      ...props
    }
  )

index.js

import React, { useState } from "react"

import { MyComponent } from "./MyComponent.jsx"
import { getApiData } from "../shared/utils/get-api-data.js"

export const MyComponentContainer = ({
  products
}) => {
  const [selection, setSelection] = useState ()

  return (
    <MyComponent
      products={products}
      selection={selection}
      setSelection={setSelection}
    />
  )
}

MyComponentContainer.getInitialProps = async ({ query }) => {
  const { data } = await getApiData (`/api/products${query.id}`)

  return {
    "products": data.products
  }
}

export default MyComponentContainer

MyComponent.jsx

import { css } from "@amory/style"
import PropTypes from "prop-types"
import React, { forwardRef, Fragment } from "react"

import styles from "./MyComponent.css.json"

export const MyComponent = forwardRef (
  ({
    "as": Element,
    children,
    className,
    disabled,
    style,
    ...props
  }, ref) =>
    (
      <Fragment>
        <Element
          aria-disabled={disabled ? true : null}
          className={css ([styles.component, style], className)}
          ref={ref}
          tabIndex={disabled ? -1 : null}
          {...props}
        >
          {children}
        </Element>
      </Fragment>
    )
)

MyComponent.defaultProps = {
  "as": "div",
  "disabled": false,
  "style": {}
}

MyComponent.displayName = "MyComponent"

MyComponent.propTypes = {
  "as": PropTypes.elementType,
  "children": PropTypes.node,
  "className": PropTypes.string,
  "disabled": PropTypes.bool,
  "style": PropTypes.object
}

export default MyComponent

redux.js

import { connect } from "react-redux"

import { actions } from "../shared/actions/index.js"
import { getApiData } from "../shared/utils/get-api-data.js"

import { MyComponent } from "./MyComponent.jsx"

const MyComponentSTP = () => {
  const { data } = getApiData ("/api/products")

  return (state) =>
    ({
      "products": data.products,
      "selected": state.selected
    })
}

const MyComponentDTP = {
  "fetchSearch": actions.fetchSearch
}

export default connect (
  MyComponentSTP,
  MyComponentDTP
) (MyComponent)