How to use the react-pose.span function in react-pose

font-size: 36px;
  font-family: Popmotion Headline;
  letter-spacing: -2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  opacity: 0;
  display: inline-block;
  transform-origin: 0% 100%;

  ${media.medium`
  font-size: 28px;
  letter-spacing: -1.5px;`} ${media.small`
  font-size: 24px;
  letter-spacing: -1px;`};
`;

const Word = styled(posed.span({}))`
  display: inline-block;
`;

// TODO make a new npm module for this
class AnimatedText extends React.Component {
  constructor(props) {
    super(props);
    this.words = props.text.split(' ');
    this.chars = this.words.map(word => word.split(''));
    this.numChars = this.words.reduce((count, word) => count + word.length, 0);
  }

  render() {
    let i = -1;
    return (
      <h2></h2>

[filterStyles.active]: active.index === index,
    [filterStyles.selected]: tag.selected,
    [filterStyles.expanded]: expanded,
  })
  return (
    <li role="option"> expanded &amp;&amp; selectIndex(index, e, e.type)}
        id={tag.id}
        aria-selected={tag.selected}&gt;
      <span>{tag.val}</span>
    </li>
  )
}

const FilterDisplaySpan = posed.span({
  initial: {
    width: props =&gt; props.wiidth || 0,
    height: props =&gt; props.heiight,
  },
})

const ListIdBox = posed.ul({
  expanded: {
    height: "auto",
  },
  hidden: {
    height: props =&gt; props.heiight,
  },
})

import { tween } from "popmotion";
import PropTypes from "prop-types";
import React from "react";
import FontAwesome from "react-fontawesome";
import posed from "react-pose";
import styled from "styled-components";

const PosedBackButton = posed.span({
  hidding: {
    left: "-50px",
    transition: (props: any) => tween({ ...props, duration: 500 })
  },
  showing: {
    left: "15px",
    transition: (props: any) => tween({ ...props, duration: 500 })
  }
});

const StyledBackButton = styled(PosedBackButton)`
  position: absolute;
  top: 15px;
  font-size: 25px;
  left: 15px;
  z-index: 9;

`;

const StyledIcon = styled(Icon)`
  width: ${(p: ThemeProps) => p.theme.sizing('ms')};
  height: ${(p: ThemeProps) => p.theme.sizing('ms')};
`;

const ErrorTextContainer = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  height: ${(p: ThemeProps) => p.theme.sizing('ms')};
`;

const PosedErrorText = posed.span({
  errorTextIn: {
    y: 0,
    opacity: 1
  },
  errorTextOut: {
    y: -20,
    opacity: 0
  }
});

const ErrorText = styled(PosedErrorText)`
  display: block;
  color: ${(p: ThemeProps) => p.theme.colour('red')};
  ${(p: ThemeProps) => p.theme.font('sm2')};
`;

[filterStyles.selected]: tag.selected,
    [filterStyles.expanded]: expanded,
  })
  return (
    <li role="option"> expanded &amp;&amp; selectIndex(index, e, e.type)}
        id={tag.id}
        aria-selected={tag.selected}&gt;
      {tag.selected ?  : }
      <span>{tag.val}</span>
    </li>
  )
}

const FilterDisplaySpan = posed.span({
  initial: {
    width: props =&gt; props.wiidth || 0,
    height: props =&gt; props.heiight,
  },
})

const ListIdBox = posed.ul({
  expanded: {
    height: "auto",
  },
  hidden: {
    height: props =&gt; props.heiight,
  },
})

const DraggableBox = styled(
  posed.div({
    draggable: true,
    init: { scale: 1 },
    drag: { scale: 1.2 },
    dragEnd: { scale: 0.5 }
  })
)`
  width: 100px;
  height: 100px;
  background: red;
`;

const Label = styled(
  posed.span({
    init: { color: '#000' },
    drag: { color: '#f00' }
  })
)``;

export const DragChildren = () => (
  
    <label>Drag me</label>
  
);

export const SingleFilter = posed.img({
  hoverable: true,
  init: { filter: 'blur(2px)' },
  hover: { filter: 'blur(0px)' }
});