npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@evo/projects

v1.0.7

Published

Evo Projects component

Downloads

1,076

Readme

При вызове компонента его стили добавляются на страницу в <head> в виде <style>...</style> с классами .evoProjects

Все иконки в формате свг, описаны в файле /src/images.jsx. ссылки на другие проекты хранятся как константы в файле /src/constants.js.

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

Dependencies

  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.6.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "classnames": "^2.2.6",
    "css-loader": "^3.1.0",
    "postcss": "^7.0.17",
    "postcss-clean": "^1.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.1.2",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react-append-to-body": "2.0.24",
    "react-easy-swipe": "0.0.18",
    "react-onclickoutside": "^6.8.0",
    "react-overflow-scrolling": "^1.0.1",
    "react-transition-group": "^4.2.1"
  }

Usage

Компонент состоит из двух частей.

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';

EvoProjects - собственно сам выпадающий компонент со ссылками. EvoProjectsIcon - иконка 9 точек.

В зависимости от параметра isPortable компонент отображает десктопную или мобильную версию.

Для десктопной версии нужно чтобы триггер и выпадающий блок были в одном блоке, в таком случае можно передавать компоненту children, который будет внутри <div></div>

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';
...
<EvoProjects ...>
    <EvoProjectsIcon ... />
</EvoProjects>

В большинстве случаев как children стоит использовать EvoProjectsIcon. EvoProjectsIcon Может принимать такие параметры: fill, style, className, onClick

Для мобильной версии EvoProjectsIcon и EvoProjects не обязательно связывать, но желательно использовать в одном компоненте и рядом EvoProjects в любом случае будет добавляться в конец body

import { EvoProjects, EvoProjectsIcon } from '@evo/projects';
...
<span onClick={}>
    <EvoProjectsIcon ... />
    ...
</span>
<EvoProjects ... />

У компонента EvoProjects есть два обязательных параметра visible и onClose.

<EvoProjects
    visible={...}
    onClose={...}
/>

Cреди зависимостей компонента есть использование window, потому, для ssr, чтобы не не получать ошибку ReferenceError: window is not defined необходимо создавать компонент обертку и асинхронно вызывать компонент на клиенте.

По умолчанию рендерится desktop view компонента. Для portable нужно передать параметр isPortable

API

EvoProjects.propTypes = {
    visible: PropTypes.bool.isRequired,
    children: PropTypes.node,
    isPortable: PropTypes.bool,
    closeOnScroll: PropTypes.bool,
    scrollLength: PropTypes.number,
    className: PropTypes.string,
    duration: PropTypes.number,
    title: PropTypes.string,
    allLinkTitle: PropTypes.string,
    target: PropTypes.string,
    align: PropTypes.string,
    transition: PropTypes.string,
    width: PropTypes.number,
    overlayBackground: PropTypes.string,
    projects: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        list: PropTypes.arrayOf(PropTypes.oneOfType([
            PropTypes.shape({
                url: PropTypes.string,
                name: PropTypes.string,
                title: PropTypes.string,
                logo: PropTypes.func,
            }),
            PropTypes.string,
        ])),
    })),
    rel: PropTypes.shape({
        [PropTypes.string]: PropTypes.string,
    }),
    onClose: PropTypes.func.isRequired,
    onClickLink: PropTypes.func,
    onClickAllLink: PropTypes.func,
};

Default значения

EvoProjects.defaultProps = {
    visible: false,
    isPortable: false,
    closeOnScroll: false,
    scrollLength: 100,
    duration: 300,
    title: 'Другие сервисы',
    allLinkTitle: 'Все сервисы',
    allLinkUrl: '',
    target: '_blank',
    align: 'center',
    transition: 'left',
    width: 320,
    overlayBackground: 'rgba(0,0,0,0.5)',
    projects: [
        {
            title: '',
            list: ['shafa', 'crafta', 'prom', 'bigl', 'kabanchik', 'izi'],
        },
        {
            title: 'Для бизнеса',
            list: ['zakupki', 'auctions', 'vchasno'],
        }
    ],
    rel: {}
};

visible (bool) isRequired

Используется для управления видимостью блока.

<EvoProjects
    visible={this.state.projectsVisible}
    className={css.evoProjects}
    onClose={() => this.setState({ projectsVisible: false })}
>
    <EvoProjectsIcon onClick={() => this.setState({ projectsVisible: true })} />
</EvoProjects>

isPortable (bool)

По умолчанию стоит значение false. Используется для изменения view всплывающего окна для мобильной версии. Для проектов с адаптивной версткой можно использовать react-responsive и в зависимости от размера окна использовать компонент с параметром isPortable true или false

closeOnScroll (bool)

По умолчанию стоит значение false. Указывает будет ли скрываться блок ссылок на десктопной версии, при прокрутке страницы, когда блок открыт.

scrollLength (number)

Расстояние необходимое проскролить вверх либо вниз, для закрытия блока ссылок при включеном параметре closeOnScroll

className (string)

По умолчанию компонент рендерит <div /> без класса. Данный параметр добавляет этому <div> class.

children (node)

Помимо <EvoProjectsIcon /> можно использовать любой кастомный node.

<EvoProjects>
    <span onClick={...}>Click me!<span>
</EvoProjects>

duration (number)

Появление и ищезание компонента происходит с легкой анимацией. Этим параметром задается длительность анимации. По умолчанию значение 300

title (string)

Заглавие в выпадающем блоке. Компонент не является мультиязычным. Текста в нем написаны на русcком языке, потому, если нужно сменить текст, или сделать текст мультиязычным, нужно передавать такие текста , как параметры. Значение по умолчанию - Другие сервисы

allLinkTitle (string)

Текст нижней ссылки в выпадающем блоке. Перевод аналогично параметру выше Значение по умолчанию - Все сервисы

allLinkUrl (string)

Ссылка, на которую будет переходить при клике на "Все сервисы". По умолчанию берется с констант самого компонента. Если параметра не будет, ссылка не будет отображаться.

target (string) [_self|_blank]

Используется для указания как будут открываться ссылки - в новых вкладках или в текущей. По умолчанию указано значение _blank, и все ссылки открываются в новых вкладках.

align (string) [center|left|right]

Применимо для десктопного вида. Раскрывающийся блок может быть центрирован относительно элемента, в котором он вызывается, или смещен в одну из сторон. Значение по умолчанию - center

transition (string) [fade|left|right]

Применим для мобильного вида. Параметр изменяет анимацию появления компонента на странице Значение по умолчанию - left - выезжание с левой стороны за duration время. right - выезжание с правой стороны fade - появление поверх всех окон на странице

При значении 'left' или 'right' выезжающий блок можно закрыть свайпом в соответствующую сторону. При значении 'fade' блок закрывается только нажатием на крестик.

width (number)

Применим для мобильного вида, кроме случая, когда transition='fade'. Параметр определяет ширину блока. Если ширина указана больше чем размер экрана, блок будет ограничен размером экрана. Когда transition='fade', блок всегде появляется на весь экран.

overlayBackground (number)

Применим для мобильного вида, кроме случая, когда transition='fade'. Задает цвет для "затемнения" под выезжающим блоком. По умолчанию - 'rgba(0,0,0,0.5)'

projects

Используется для определения порядка ссылок и их группирования. Значение по умолчанию

projects: [
    {
        title: '',
        list: ['shafa', 'crafta', 'prom', 'bigl', 'kabanchik', 'izi'],
    },
    {
        title: 'Для бизнеса',
        list: ['zakupki', 'auctions', 'vchasno'],
    }
]

Ссылки можно делить на группы, у каждой группы может быть свой title и list В массиве list элементы могут быть заданы как строки, тогда будут проверяться и использоваться названия как ключи в уже заготовленном в компоненте объекте с готовыми значениями для логотипа, ссылки и названия. Список готовых ключей: bigl, crafta, izi, kabanchik, prom, rialto, shafa, vchasno, rozetka_travel, zakupki, auctions

если нам точечно нужно изменить стандартное значение, или добавить свою ссылку, можно использовать объект как элемент в массиве list с ключами name, title, url, logo. Например

{
    name: 'bigl',
    title: 'Bigl',
    url: 'https://bigl.ua/',
    logo: (
        <svg className={className} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29.39 26.02'>
            <path fill='#f55832' d='M23.94,17.77,22,15.89a13.26,13.26,0,0,1-1.18-1.32c-.33-.51-.66-1-1-1.54a5,5,0,0,0-9.16-.22c-.37.6-.86,1.39-1.11,1.76a19,19,0,0,1-1.68,1.81L6.51,17.77a4.77,4.77,0,0,0-.1,6.74l.1.09A5,5,0,0,0,10.85,26a2.58,2.58,0,0,0,.42-.07,14.6,14.6,0,0,1,4-1,14.6,14.6,0,0,1,4,1,1.68,1.68,0,0,0,.3.05,5,5,0,0,0,4.43-1.33A4.77,4.77,0,0,0,24,17.86l-.09-.09m4.93-9.38-3.69,3.13.9,1a1.34,1.34,0,0,1,.34,1,1.26,1.26,0,0,1-.49.86,1.35,1.35,0,0,1-.81.28,1.33,1.33,0,0,1-1-.47l-1.77-2a1.32,1.32,0,0,1,.17-2l4.58-3.86A1.43,1.43,0,0,1,28,6a1.34,1.34,0,0,1,1,.48,1.27,1.27,0,0,1-.17,1.91M23.59,2.76a1.1,1.1,0,0,1-1,.74.84.84,0,0,1-.35-.07A1.09,1.09,0,0,1,21.76,3a1.81,1.81,0,0,0-1-.7,1.28,1.28,0,0,0-.47-.1c-.66,0-1.31.58-1.71,1.51s-.48,2.11.51,2.51a1.47,1.47,0,0,0,.52.11,1,1,0,0,0,.86-.54L20,5.58a1,1,0,0,1-.53-1.43,1.09,1.09,0,0,1,1.4-.62l1.53.63c.51.21,1,.68.58,1.75a3.78,3.78,0,0,1-3.36,2.64,3.45,3.45,0,0,1-1.31-.27c-2-.81-2.71-3.08-1.73-5.41A4.29,4.29,0,0,1,20.35,0a3.52,3.52,0,0,1,1.31.26c1.57.64,2.23,1.8,1.93,2.5M13.21,7.53a1.32,1.32,0,0,1-.74.71,1.54,1.54,0,0,1-.55.11,1.33,1.33,0,0,1-1.23-.85L8.36,2A1.31,1.31,0,0,1,8.33,1a1.31,1.31,0,0,1,.74-.7A1.38,1.38,0,0,1,9.63.16,1.32,1.32,0,0,1,10.85,1l2.33,5.45a1.31,1.31,0,0,1,0,1.06m-6.9,3.52-.67.7-.91-.84.58-.6c.36-.39.72-.48,1-.22a.63.63,0,0,1,0,1M3.84,8.77a.59.59,0,0,1-.19.41l-.37.4-.79-.73.37-.39a.51.51,0,0,1,.76-.08.59.59,0,0,1,.22.39m4-.24a2.21,2.21,0,0,0-2.28-.41,1.84,1.84,0,0,0-.68-1.47,2.24,2.24,0,0,0-3.15.15L.33,8.26A1,1,0,0,0,0,9.05a1.06,1.06,0,0,0,.37.74l4.45,4.08a1.07,1.07,0,0,0,.76.31,1.14,1.14,0,0,0,.82-.37l1.49-1.56a2.41,2.41,0,0,0-.06-3.72' />
        </svg>
    )
}

rel

Объект в котором ключами служат названия проектов. Используется для указания ссылкам параметра rel По умолчанию всем ссылкам дается rel='nofollow'. Чтобы его изменить нужно указать rel={{ bigl: 'noopener noreferrer', izi: '' }}

onClose isRequired

Функция вызывается при закрытии. Можно использовать для аналитики.

onClickLink

Функция вызывается при нажатии на одну из ссылок. Можно использовать для аналитики.

onClickAllLink

Функция вызывается при нажатии на ссылку 'Все сервисы'. Можно использовать для аналитики.