How to use the react-pose.input function in react-pose
To help you get started, we’ve selected a few react-pose examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
unicorn-utterances / unicorn-utterances / src / components / filter-search-bar / search-field / search-field.js View on Github 
import React, { useEffect, useMemo, useState } from "react"
import styles from "./search-field.module.scss"
import classNames from "classnames"
import SearchIcon from "../../../assets/icons/search.svg"
import { useElementBoundingBox } from "../../../utils/useRefBoundingBox"
import posed from "react-pose"
import { useLunr } from "../../../utils/useLunr"
const placeholder = "Search"
const PosedInput = posed.input({
initial: {
width: props => props.wiidth,
},
})
export const SearchField = ({ className, onSearch = () => {} }) => {
const [inputVal, setInputVal] = useState("")
const [focused, setFocused] = useState("")
const {onSearch: searchWithLunr, results} = useLunr();
useEffect(() => {
onSearch(results);
}, [results])
const { ref: containerRef, width: maxSpanWidth } = useElementBoundingBox()react-pose
A declarative animation library for React
