@danyarubcov/adaptivitynavigation

Для чего нужна эта библиотека?

• Для адаптивного ui навигации в зависимости от размеров экрана (В соответствии с VKUI StyleGuide)

Установка

Используя npm:

$ npm i @danyarubcov/adaptivitynavigation

Используя yarn:

$ yarn add @danyarubcov/adaptivitynavigation

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

NavigationProvider

Для начала нужно обернуть приложение в NavigationProvider

// App.jsx
import { NavigationProvider } from "@danyarubcov/adaptivitynavigation";
// import activeStory from your storage (Redux or any)
const App = () => {
  <NavigationProvider activeStory={activeStory}>
    <App />
  </NavigationProvider>;
};

Важно

Библиотека базируется на хуке useAdaptivity, поэтому Ваше приложение должно быть обернуто в AdaptivityProvider

Пример

// index.js
import ReactDOM from "react-dom";
import { AdaptivityProvider, AppRoot } from "@vkontakte/vkui";
import App from "./App";

ReactDOM.render(
  <AdaptivityProvider>
    <AppRoot>
      <App />
    </AppRoot>
  </AdaptivityProvider>,
  document.getElementById("root")
);

buttons

NavigationProvider ожидает в себе набор кнопок, которые в дальнейшем будут использоваться для навигации. NavigationButton нужно передать в пропс buttons, который инкапсулирует поведение TabbarItem и Cell

Пример

// App.jsx
import {
  NavigationProvider,
  NavigationButton,
} from "@danyarubcov/adaptivitynavigation";
// import activeStory from your storage (Redux or any)
const App = () => {
  <NavigationProvider
    activeStory={activeStory}
    buttons={
      <Fragment>
        <NavigationButton
          selected={activeStory === "main"}
          data-story="main"
          onClick={(e) =>
            alert("You click to button " + e.currentTarget.dataset.story)
          }
          text="Сервисы"
        >
          <Icon28ServicesOutline />
        </NavigationButton>
        <NavigationButton
          selected={activeStory === "clips"}
          data-story="clips"
          onClick={(e) =>
            alert("You click to button " + e.currentTarget.dataset.story)
          }
          text="Клипы"
        >
          <Icon28ClipOutline />
        </NavigationButton>
      </Fragment>
    }
  >
    <App />
  </NavigationProvider>;
};