Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

Overview

solid-custom-navigation

npm npm version npm downloads sponsors

Get, Set, Go!

Custom navigations for Solid, written in Typescript. Implement custom page transition logic and animations .

Note: This package relies on solid-app-router.

Usage

Installation

npm install solid-custom-navigation --save
yarn add solid-custom-navigation ## or in yarn

Example

import { Component } from 'solid-js'
import { useNavigate } from 'solid-app-router'
import { useNavigation } from 'solid-custom-navigation'


// And then in your component..
const Page: Component = () => {
  const { get, set, go } = useCustomNavigation(useNavigate(), options)

  return (
    <div style={{ animation: get() }}></div>
  )
}

Reference

get

() => string

Get the current animation string.

set

Setter<'UNMOUNTED' | 'DEFAULT' | 'MOUNTED'>

Set the current component transition state.

go

async (to: string, opts?: Partial<NavigateOptions<unknown>> | undefined)

Navigate to a route. Pretty much an alias for navigate's props.

getState

Accessor<'UNMOUNTED' | 'DEFAULT' | 'MOUNTED'>

Get the current component transition state.

API

options

UseNavigateOptions - OPTIONAL

Options for navigation.

onMount

() => void - OPTIONAL

This function runs onMount.

onTransition

() => void - OPTIONAL

This function during a transition.

onCleanup

() => void - OPTIONAL

This function runs onCleanup.

transitionDelay

number - OPTIONAL

The number of milliseconds to wait before navigating away (and calling onCleanup).

customAnimations

{ [ 'UNMOUNTED' | 'DEFAULT' | 'MOUNTED' ]: string } - OPTIONAL

Add custom animation strings.

Here's an example using keyframes from solid-styled-components to create a custom animation.

const customUnmountAnimation = keyframes``
const customMountAnimation = keyframes``

// And then later on..
useCustomNavigation(useNavigate(), {
  UNMOUNTED: `${ customUnmountAnimation } 0.5s ease`,
  MOUNTED: `${ customMountAnimation } 0.5s ease`
})

License

MIT

You might also like...

An inheritable and strong logic template front-end mvvm framework.

Intact 文档 Documents 简介 Intact作为一个可继承,并且拥有强逻辑模板的前端MVVM框架,有着如下特色: 充分利用组合与继承的思想,来最高限度地复用代码 同时支持数据驱动和组件实例化调用,来最便捷地实现功能 强逻辑模板,赋予模板更多功能和职责,来完成业务逻辑和表现逻辑分离 安装

Oct 21, 2022

Play logic games and claim exclusive NFTs!

Play logic games and claim exclusive NFTs!

Bit Gaming Samruk Hackathon Winner 🏆 Play-to-earn DAO with exclusive NFT collection Idea We are bringing together curious minds and reward them with

Jun 21, 2022

Build redux logic, without getting nervous 😬

Build redux logic, without getting nervous 😬

Redux Cool Build redux logic, without getting nervous 😬 Description Redux Cool is an awesome tiny package that allows you to easily and intuitively w

Nov 3, 2022

Keep your Business Logic appart from your actions/loaders plumbing

Keep your Business Logic appart from your actions/loaders plumbing

Remix Domains Remix Domains helps you to keep your Business Logic appart from your actions/loaders plumbing. It does this by enforcing the parameters'

Jan 2, 2023

Kasada's p.js partially deobfuscated, still has VM logic

Kasada's p.js Deobfuscated The script was obfuscated by replacing most strings with a function to grab the string from an array and decode it. Ex: _0x

Nov 9, 2022

Easy conditional if-else logic for your Cypress testsDo not use

Easy conditional if-else logic for your Cypress testsDo not use

cypress-if Easy conditional if-else logic for your Cypress tests Tested with cy.get, cy.contains, cy.find, .then, .within commands in Cypress v9 and v

Dec 14, 2022

Logic programming with JSON.

Cicada Whereabouts Logic programming with JSON. I asked the boy beneath the pines. He said, "The master’s gone alone Herb-picking, somewhere on the mo

Dec 22, 2022

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat

Dec 24, 2021

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Nov 15, 2022
Owner
Dirag Biswas
commits speak louder than bio-s
Dirag Biswas
A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Alexis H. Munsayac 9 Mar 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Complete, flexible, extensible and easy to use page transition library for your static web.

We're looking for maintainers! Complete, flexible, extensible and easy to use page transition library for your static web. Here's what's new in v2. Ch

null 3.7k Jan 2, 2023
A cover page transition based on Vitalii Burhonskyi's Dribbble shot.

Cover Page Transition A cover page transition based on Vitalii Burhonskyi's Dribbble shot. Article on Codrops Demo Installation Install dependencies:

Codrops 37 Dec 31, 2022
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.

Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @

Code Chemistry Inc. 9 Nov 19, 2022
🚀 Transition number values using easing functions

react-transition-value Transition / Animate number values using easing functions See Demos ⚡️ Getting started npm i react-transition-value import {

Björn 46 Dec 15, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
Nest.js project used it implement login page functionality.

Basic Login Backend (API) Description This project is the backend (API) portion of a basic login application. It calls a local frontend project basic-

Chad D.S 2 Mar 21, 2022