How to use the react-pose.polyline 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.
beaverbuilder / assistant / src / original-ui / ui / components / panel-parts / index.js View on Github 
const classes = classname( {
'fl-asst-screen-footer': true,
} )
return (
<div>
<div>{children}</div>
</div>
)
}
const MoreButton = posed.button( {
hoverable: true,
focusable: true,
pressable: true,
} )
const MoreButtonPath = posed.polyline( {
init: {
points: '2,4 25,4 48,4',
},
hover: {
points: ( { isExpanded } ) => isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
},
press: {
points: ( { isExpanded } ) => isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
},
} )
const Expander = posed.div( {
init: {
overflow: 'hidden',
},
open: {const classes = classname( {
'fl-asst-screen-footer': true,
} )
return (
<div>
<div>{children}</div>
</div>
)
}
const MoreButton = posed.button( {
hoverable: true,
focusable: true,
pressable: true,
} )
const MoreButtonPath = posed.polyline( {
init: {
points: '2,4 25,4 48,4',
},
hover: {
points: ( { isExpanded } ) => isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
},
press: {
points: ( { isExpanded } ) => isExpanded ? '5,6 25,2 45,6' : '5,2 25,6 45,2',
},
} )
const Expander = posed.div( {
init: {
overflow: 'hidden',
},
open: {react-pose
A declarative animation library for React
