@lidofinance/next-ui-primitives
v0.46.0
Published
Next UI primitives (client-side: components, constants, hooks)
Downloads
212
Readme
@lidofinance/next-ui-primitives
Next UI primitives: components, constants, hooks etc.
This component abstracted from the blockchain network, other words you can use it for any widgets for any blockchains.
This component based on Next.js.
Installation
yarn add @lidofinance/next-ui-primitives
# and react 17
yarn add react@^17.0.0
# or react 18
yarn add react@^18.0.0
# and additional
yarn add next@^12.3.0
Using
Components
LidoLink:
Should use for external (https://lido.fi/) or local links (/example-page?ref=SOME_REF&embed=SOME_EMBED
).
You can pass a ref
and embed
query string parameters between local links:
ref
is needed for referral program;embed
is needed for support ofstaking widget
via iframe inledger live
.
Below an example how to make custom styles of LidoLink:
import React, { FC } from 'react'
import { useRouter } from 'next/router'
import styled from 'styled-components'
import { LidoLink, LidoLinkProps } from '@lidofinance/next-ui-primitives'
export type NavigationLinkProps = LidoLinkProps & {
icon: React.ReactNode
title: string
href: string
}
export const NavigationLinkStyle = styled(LidoLink)<{ $active: boolean }>`
// Some custom styles...
`
export const Component: FC<NavigationLinkProps> = ({ icon, title, href, ...rest }) => {
const { pathname } = useRouter()
// compare without query string
const active = pathname === href.split('?')[0]
return (
<NavigationLinkStyle {...rest} href={href} $active={active}>
<React.Fragment>
{icon}
<span>{title}</span>
</React.Fragment>
</NavigationLinkStyle>
)
}