Простой, но функциональный лайтбокс для React
Краткое введение 🧐
Все началось, когда я работал над одним из своих проектов с React. У клиента был сайт блога, и он хотел добавить лайтбокс к изображениям в сообщениях блога. Проблема заключалась в том, что данные извлекались из серверной части, и я не мог контролировать содержимое каждого сообщения.
Я искал в Интернете несколько лайтбоксов для React, но они работали так, что мне приходилось заранее объявлять изображения. либо в массиве, либо в объекте, и т. д., но что, если вы не знаете, какой контент вы получаете, и вы просто хотите добавить лайтбокс к изображениям в контенте?
Simple React Lightbox дает вам возможность добавлять функциональные возможности лайтбокса к набору изображений, независимо от того, определяете ли вы их самостоятельно или получаете из внешнего источника (API, серверная часть и т. д.). Просто используйте включенный компонент, чтобы обернуть им свое приложение, определить свои параметры (если хотите), а затем использовать компонент ‹SRLWrapper›, обернув его вокруг контента, где у вас есть или ожидаются ваши изображения!
Упакован с функциями 📦
С момента выхода первой версии я добавил массу новых и полезных функций. Кроме того, версия PRO (всего за 4,99 доллара США) добавляет еще больше возможностей. Некоторые из особенностей:
- Проверка изображения (если у вас битое изображение, оно будет проигнорировано лайтбоксом).
- Поддержка аудио и видео (ТОЛЬКО PRO)
- Исключить элементы с простым пользовательским атрибутом HTML (ТОЛЬКО PRO)
- Пользовательские значки и подписи (ТОЛЬКО PRO)
- Поддержка NextJS и Gatsby, а также поддержка образов Gatsby.
- Наблюдаемый, чтобы проверить, загружены ли другие изображения (например, из API).
- Переводы (совместимые с i18n) для перевода значков на выбранный вами язык (ТОЛЬКО PRO)
- Обратные вызовы для получения состояния лайтбокса, включая подсчет количества изображений, которые он содержит, какой слайд выбран и какие слайды идут до и после текущего.
- Крючки! Один для открытия лайтбокса (с первого изображения или проходящего и индексного) и один для закрытия лайтбокса.
Установить
// With npm npm install --save simple-react-lightbox // or with Yarn yarn add simple-react-lightbox
использование
Я предоставил вам демо-версию на CodeSandbox, чтобы вы могли поиграть, или вы можете просто следовать приведенным ниже инструкциям. Кроме того, вы можете попробовать полную демо-версию с PRO-версией на официальном сайте https://demo.simple-react-lightbox.dev.
инструкции
Прежде всего, вам нужно «обернуть» ваше приложение React основным компонентом, чтобы он мог создать контекст. Пример ниже позволит вам использовать Simple React Lightbox везде, где это необходимо в вашем приложении:
import React from "react"; import MyComponent from "./components/MyComponent"; import SimpleReactLightbox from "simple-react-lightbox"; // Import Simple React Lightbox function App() { return ( <div className="App"> <SimpleReactLightbox> <MyComponent /> // Your App logic (Components, Router etc...) </SimpleReactLightbox> </div> ); } export default App;
Затем вы хотите импортировать и использовать компонент SRLWrapper везде, где вы ожидаете контент с изображениями, к которым вы хотите добавить функциональность лайтбокса. Обратите внимание на {}
, так как это именованный экспорт. Подпись к изображениям будет сгенерирована из атрибута image «alt»!
import React from "react"; import { SRLWrapper } from "simple-react-lightbox"; // Import SRLWrapper function MyComponent() { return ( <SRLWrapper> // This will be your content with the images. It can be anything. Content defined by yourself, content fetched from an API, data from a graphQL query... anything :) </SRLWrapper> ); } export default MyComponent;
Вот и все 🥳 Поскольку мы не передаем никакие параметры, у вас должен быть работающий лайтбокс с параметрами по умолчанию, как на изображении ниже:
Опции
Я знаю, что вы думаете.
"Это круто и все такое, но стиль лайтбокса не соответствует стилю моего проекта. Это нормально. Я воспользуюсь вашими классами и заменю все своими собственными стилями…”
⚠️ ЖДИТЕ! ⚠️ Несмотря на то, что я определил имена классов для каждой части лайтбокса, я предоставил все параметры, необходимые для настройки лайтбокса, чтобы вам не пришлось добавлять какую-либо дополнительную логику. Вы можете настроить все! Проверьте, как добавить параметры в параметрах репозитория GitHub.
Вот и все! Надеюсь, вам понравится Simple React Lightbox, и вы продолжите следить за проектом, так как в будущем я планирую добавить больше функций.