import { useState, useEffect, useCallback, useContext } from 'react'; import { transparentize } from 'polished'; import styled from 'styled-components'; import autosize from 'autosize'; import WithHover from '../../cursor/WithHover'; const Container = WithHover(styled.textarea` font-size: 32px; width: 100%; background: transparent; color: ${({ theme }) => theme.colors.body}; font-family: ${({theme}) => theme.fonts.default}; border: none; margin-bottom: 24px; resize: none; &:focus { outline: none; } &::selection { background: ${({theme}) => transparentize(.6, theme.colors.highlight)}; } `, 'text'); const TextArea = (props) => { const [ myRef, setRef ] = useState(); const ref = useCallback(node => { autosize(node) setRef(node) }); useEffect(() => { if (myRef && props.focus) { myRef.focus(); } },[myRef]) return ( <Container passThroughRef={ref} rows="1" {...props}/> ) } export default TextArea;