Cloudinary React Components

Během posledních šesti měsíců jsem hodně experimentoval s Reactem i Cloudinary a byla to pecka – hodně se učím a zároveň získávám ambice a žízeň, které jsem měl jako mladý vývojář. React bylo zjevení: pokročilý rámec JavaScriptu, který věci příliš nekomplikuje a povzbudil mě, abych se naučil více ESNext a Babel. Cloudinary mi umožňuje dělat úžasné věci s obrázky a médii, jako je vytváření filtrů podobných Instagramu, transformace obrázků a další, to vše úpravou adresy URL obrázku. Cloudinary poskytuje rozhraní API pro řadu různých jazyků (Node.js, Python, PHP atd.), ale šli o krok dále a nyní nabízejí sadu komponent React, které můžete použít ve vaší aplikaci React!

Instalace cloudinary-react

Sada komponent React společnosti Cloudinary je dostupná prostřednictvím cloudinary-react jméno:

yarn add cloudinary-react
# or `npm install cloudinary-react`

Použijte npm install nebo yarn add získat tyto součásti.

Součásti cloudu

Cloudinary poskytuje CloudinaryContext , Image , Video a Transformation komponenty. Jsou dostupné ve vaší aplikaci pomocí require nebo import :

import { Image, Video, Transformation, CloudinaryContext } from 'cloudinary-react';

Pojďme se podívat na jednotlivé typy komponent!

Obrázek

Image komponenta je nejjednodušší z komponent, která umožňuje všechny typy transformací:

<!-- basic usage -->
<Image cloudName="david-wash-blog" publicId="ringo" width="600" crop="scale" alt="Ringo" />

<!-- with a simple effect -->
<Image publicId="ringo" effect="cartoonify:25:50" />

Výše uvedený kód se transpiluje na:

<img alt="Ringo" width="600" src="http://res.cloudinary.com/david-wash-blog/image/upload/c_scale,w_600/ringo">

Ke každému obrázku můžete přidat všechny obvyklé atributy, například alt , title , a tak dále.

Video

Video komponenta je také velmi jednoduchá a funguje tak, jak si myslíte:

<Video cloudName="david-wash-blog" publicId="sample-video" width="800" controls />

Všechny transformace lze použít také na videa!

Transformace

Image komponenty mohou obsahovat libovolný počet Transformation komponenty pro úpravu odchozího obrázku:

<!-- Rotate and trim the image, then add text -->
<Image cloudName="david-wash-blog" publicId="ringo">
    <Transformation angle="-45"/>
    <Transformation effect="trim" angle="45" crop="scale" width="600">
        <Transformation overlay="text:Arial_100:Hello" />
    </Transformation>
</Image>

Dokumentace Transformation společnosti Cloudinary je vynikající referencí pro úžasnou šíři transformací. Máte-li jakékoli dotazy ohledně toho, jak má být transformace přidána jako atribut, klikněte na Node.js kartu v příkladech dokumentace Cloudinary a podívejte se, jaké by měly být vaše klíče a hodnoty.

Kontext cloudu

CloudinaryContext komponenta umožňuje inteligentní seskupování médií a efektů, které mají být aplikovány na její podřízený obsah, ať už je to Image , Video , Transformation komponenty:

<CloudinaryContext cloudName="david-wash-blog" effect="art:aurora" width="300">
   <Image publicId="ringo"></Image>
   <Image publicId="coffee"></Image>
   <!-- ... -->
</CloudinaryContext>

Ve výše uvedeném příkladu všechny Image komponenty mají efekt určený svým nadřazeným CloudinaryContext , úžasný způsob, jak omezit opakovaný kód a udržet svůj JSX pevný a organizovaný! Můžete dokonce stohovat CloudinaryContext komponenty:

<CloudinaryContext cloudName="david-wash-blog">
  <Image publicId="ringo" />
  <Image publicId="coffee" />
  <CloudinaryContext fetchFormat="auto" quality="auto">
    <Image publicId="ringo" />
    <Image publicId="coffee" />
  </CloudinaryContext>
</CloudinaryContext>

Vytvoření rychlého experimentu ve stylu Instagramu

Jeden z důvodů, proč miluji React (a konkrétněji create-react-app ) je, že mi umožňuje sestavit dynamickou aplikaci opravdu rychle. Protože Cloudinary poskytuje několik desítek uměleckých filtrů, myslel jsem si, že by bylo zábavné vytvořit velmi jednoduchou aplikaci podobnou Instagramu pomocí knihovny React Cloudinary. O několik minut později jsem měl něco:

class App extends Component {

  state = { width: 600, filter: null };

  filters = [
    'al_dente', 'audrey', 'aurora', 'daguerre', 'eucalyptus', 'fes', 'frost',
    'hairspray', 'hokusai', 'incognito', 'linen', 'peacock', 'primavera',
    'quartz', 'red_rock', 'refresh', 'sizzle', 'sonnet', 'ukulele', 'zorro'
  ];

  onPreviewClick(event) {
    this.setState({ filter: event.target.src });
  }

  render() {

    return (
      <div>
        <CloudinaryContext cloudName="david-wash-blog">
          <div className="wrapper">
            <div className="left">
              <Image
                publicId="ringo"
                width="{this.state.width}">
                { this.state.filter && (<Transformation effect={`art:${this.state.filter}`} />) }
              </Image>
            </div>
            <div className="right">
              {this.filters.map(filter => (
                <div className="preview" key={filter}>
                  <Image publicId="ringo" width="{this.state.width}" onClick={this.onPreviewClick}>
                    <Transformation effect={`art:${filter}`} />
                  </Image>
                  <span>{filter}</span>
                </div>
              ))}
            </div>
          </div>
        </CloudinaryContext>
      </div>
    );
  }
}

Výsledek vypadá takto:

Cloudinary poskytuje rozhraní API a pomocníky pro každý hlavní programovací jazyk a nyní poskytuje zdroje knihoven jQuery a React, které vám usnadní kódování vašich multimediálních aplikací. Zvláště užitečné jsou Transformation a CloudinaryContext komponenty, které umožňují, aby váš kód zůstal čistý a stručný. cloudinary-react je jen další skvělý důvod, proč se obrátit na Cloudinary pro všechny vaše mediální potřeby!