How to use the react-pose.button 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 / front / ui / components / panel-parts / index.js View on Github 
)
}
export const ScreenFooter = ( { children } ) => {
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',
},
} )left?: number;
right?: number;
bottom?: number;
}
interface MapOverlayButton {
onClick: () => void;
position: CssPosition;
iconName: IconNames;
color?: string;
hoverColor?: string;
size?: number;
hidden: boolean;
}
const AnimatedContainer = posed.button({
enter: {
opacity: 1,
},
exit: {
opacity: 0,
},
});
const Container = styled(AnimatedContainer)<{
position: CssPosition;
}>`
position: absolute;
${props => props.position.top && `top: ${props.position.top}px`};
${props => props.position.bottom && `bottom: ${props.position.bottom}px`};
${props => props.position.left && `left: ${props.position.left}px`};
${props => props.position.right && `right: ${props.position.right}px`};)
}
export const ScreenFooter = ( { children } ) => {
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',
},
} )react-pose
A declarative animation library for React
