0.0.72 • Published 9 months ago

super-navigation v0.0.72

Weekly downloads
-
License
-
Repository
github
Last release
9 months ago

SuperNavigation

Not Your Average Navigation

SuperNavigation is a powerful, customizable navigation library for Svelte and SvelteKit applications. It aims to bring a mobile UX to the web, making PWAs one step closer to a true native experience.

Caution

Not ready for production, Documentation is under progress

Features

  • Easy-to-use API for navigation between screens
  • Customizable header and screen styles
  • Dynamic screen loading
  • Built with TypeScript for type safety
  • Supports deep routing and nesting
  • Refreshable navigation states
  • Optimized for SvelteKit with server-side rendering support
  • Tailwind out of the box

Installation

To install SuperNavigation, run the following command:

npm install super-navigation

Or if you're using Yarn:

yarn add super-navigation

Usage

Stack navigation example

You can find a full working example at https://github.com/0xDjole/super-navigation/tree/master/src/routes. Pull https://github.com/0xDjole/super-navigation and run npm run dev to play with the very basic example.

<script lang="ts">
  import { navigation } from 'super-navigation';
</script>

<Stack
  defaultIndex={0}
  screens={[
    {
      component: FakeScreen,
      title: 'Screen 1',
      headerClass: 'bg-gray-500 border-solid border-b-2 border-gray-300',
      path: '/'
		},
    {
      component: FakeScreen2,
      title: 'Screen 2',
      path: '/screen2',
      headerClass: 'bg-gray-500 border-solid border-b-2 border-gray-300',
      backDefault: '/'
    }
  ]}
/>

FakeScreen component

<script lang="ts">
  import { onMount } from 'svelte';
  import { navigation } from 'super-navigation';

  onMount(() => {
    navigation?.loadUp();
  });
</script>

<div style="height: 100%; background-color: red;">
  <span class="text-white">Screen 1</span>
  <div>
    <button class="bg-green-300 p-3" on:click={() => navigation?.navigate('/screen2')}>
      Go to screen 2
    </button>
  </div>
</div>

navigation.navigate('/path')

This is how you are navigating to different screens.

navigation.getSearchParam('param')

Get the current query parameters

navigation.back();

Go to the previous screen

navigation.loadUp();

SuperNavigation is optimized for SvelteKit, allowing for server-side rendering of the initial screen with regular +page.svelte from the routes. You then switch to client-side navigation navigation.loadUp() and perform regular navigation with navigation.navigate('/path').

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

0.0.70

9 months ago

0.0.71

9 months ago

0.0.72

9 months ago

0.0.63

9 months ago

0.0.64

9 months ago

0.0.65

9 months ago

0.0.66

9 months ago

0.0.67

9 months ago

0.0.68

9 months ago

0.0.69

9 months ago

0.0.61

9 months ago

0.0.59

9 months ago

0.0.56

9 months ago

0.0.57

9 months ago

0.0.58

9 months ago

0.0.43

11 months ago

0.0.44

10 months ago

0.0.45

10 months ago

0.0.46

10 months ago

0.0.47

10 months ago

0.0.51

10 months ago

0.0.52

10 months ago

0.0.53

10 months ago

0.0.54

10 months ago

0.0.55

10 months ago

0.0.50

10 months ago

0.0.48

10 months ago

0.0.49

10 months ago

0.0.40

12 months ago

0.0.41

12 months ago

0.0.42

12 months ago

0.0.37

1 year ago

0.0.38

12 months ago

0.0.39

12 months ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.34

1 year ago

0.0.35

1 year ago

0.0.36

1 year ago

0.0.31

1 year ago

0.0.30

1 year ago

0.0.29

1 year ago

0.0.28

1 year ago

0.0.22

1 year ago

0.0.23

1 year ago

0.0.25

1 year ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago