CODEWITHSUNDEEP
reactjsstyled-componentskeyframe
Anderson Souza
Anderson Souza

Reputation: 1

pass props to keyframes with styled-components - React

i can't to pass 'inicial' and 'final' to keyframes as props. Can you help me?

const sliderzada = keyframes`
 from {
  transform: translate(${0}px) //i need 'inicial' here
 }
 to {
  transform: translate(${-1250}px) //i need 'final' here
 }
`;

const animation = css`
animation: ${ sliderzada} 1.2s ease-in-out;
`;

const Sliderzin = styled.div`
${props => props.isClicked && animation}
`;

const Slider = () => {

const [isClicked, setIsClicked] = React.useState(false)
const [inicial, setInicial] = React.useState(0)
const [final, setFinal] = React.useState(-1250)

return (
    <div className={styles.wrapper}>
        <Sliderzin inicial={inicial} final={final} isClicked={isClicked}>
        </Sliderzin>
    </div>
)

}

I only need of 'inicial' and 'final' in keyframe.

Upvotes: 0

Views: 367

Answers (1)

Viet
Viet

Reputation: 12779

You just add props like this:

const sliderzada = (props) => keyframes`
  from {
    transform: translate(${props.inicial}px) //i need 'inicial' here
  }
  to {
    transform: translate(${props.final}px) //i need 'final' here
  }
`;


const animation = (props) => css`
  animation: ${sliderzada(props)} 1.2s ease-in-out;
`;

const Sliderzin = styled.div`
  ${props => props.isClicked && animation(props)}
`;

Upvotes: 1

Related Questions