adaptivitynavigation v1.0.7

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

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

Установка

Используя npm:

$ npm i adaptivitynavigation

Используя yarn:

$ yarn add adaptivitynavigation

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

NavigationProvider

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

// App.jsx
import { NavigationProvider } from '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 '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>;
};