Переворачивание компонентов в React

Использование React-Flippy для добавления флип-анимации в проекты React

В этом посте я расскажу об основах забавного NPM под названием React-Flippy. Этот пакет позволяет добавить анимацию перелистывания к двум компонентам в проекте React. Чтобы ознакомиться с документацией, нажмите здесь!

Установка

Чтобы установить React-Filppy в вашей консоли, просто запустите:

$ npm install react-flippy
- or if you are using yarn - 
$ yarn add react-flippy

Теперь мы можем использовать библиотеку react flippy в нашем проекте.

использование

Прежде чем мы сможем начать листать компоненты, нам нужно импортировать 3 вещи из react flippy. Filppy Wrapper, который будет обернут вокруг всей нашей логики перелистывания. Оболочка Frontside, которая будет обернута вокруг компонента, который мы хотим видеть при рендеринге. Наконец, обертка Backside, которая будет обертывать компонент, который мы хотим скрыть.

import Flippy, {FrontSide, BackSide} from 'react-flippy

Затем мы можем добавить оболочку Flippy в наш оператор return:

return {
  <Flippy>
  </Flippy>
}

Теперь, когда у нас есть обертка Flippy, мы можем добавить обертки Front и Backside.

return {
  <Flippy>
    <FrontSide>
    </FrontSide>
    <BackSide>
    </BackSide>
  </Flippy>
}

Теперь, когда обертки настроены, есть несколько вариантов выбора, чтобы показать анимацию переворота. Вы можете просто добавить немного JSX в теги FrontSide и BackSide, или вы можете отобразить два отдельных компонента. Для этого примера я собираюсь визуализировать эти два дополнительных компонента:

import React from 'react'
export default function SideA() {
  return (
    <div>
      <p> Side A</p>
    </div>
  )
}
...
import React from 'react'
export default function SideB() {
  return (
    <div>
      <p> Side B</p>
    </div>
  )
}

Для этого нам просто нужно импортировать и добавить компоненты Side, где это необходимо:

import Flippy, {FrontSide, BackSide} from 'react-flippy
import SideA from './components/SideA'
import SideB from './components/SideB'
return {
  <Flippy>
    <FrontSide>
      <SideA/>
    </FrontSide>
    <BackSide>
      <SideB/>
    </BackSide>
  </Flippy>
}

Теперь мы можем видеть:

Как вы можете видеть, он поставляется с некоторыми базовыми стилями, но чтобы действительно увидеть его, мы можем быстро добавить фон с каждой стороны, чтобы он выделялся немного больше.

return {
  <Flippy>
    <FrontSide style={{ backgroundColor: '#41669d' }}>
      <SideA/>
    </FrontSide>
    <BackSide style={{ backgroundColor: '#175852'}}>
      <SideB/>
    </BackSide>
  </Flippy>
}

При этом мы добавили базовую анимацию переворота между двумя разными компонентами!

Ждать! Есть больше!

Мы также могли бы добавить различные реквизиты, чтобы изменить то, как мы хотим, чтобы наша анимация работала! Следующие изображения взяты из официальной документации и описывают, как могут называться пропсы для каждого компонента/обертки из реагировать-флиппи:

Это также дает нам пример того, как некоторые из них могут быть вызваны в Flippy Component:

Например, если бы мы передали несколько реквизитов для изменения значений по умолчанию, мы могли бы добавить:

return {
  <Flippy
    flipOnHover={true}
    flipOnClick={false}
    flipDirection="vertical"
    style={{width:"200px", height:"200px" }}
  >
    <FrontSide>
      <SideA/>
    </FrontSide>
    <BackSide>
      <SideB/>
    </BackSide>
  </Flippy>
}

Теперь наш экран будет выглядеть и работать так:

Вывод

React flippy — отличный способ добавить анимацию в проект React! Проверьте это, возитесь с реквизитом и удачного кодирования!