@startupjs-ui/link 0.1.12 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.mdx +10 -8
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/link
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/link
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/link
|
package/README.mdx
CHANGED
|
@@ -8,7 +8,9 @@ import { Sandbox } from '@startupjs-ui/docs'
|
|
|
8
8
|
|
|
9
9
|
# Link
|
|
10
10
|
|
|
11
|
-
Link
|
|
11
|
+
Link provides navigation within the app and to external URLs. Use the `to` prop (or its alias `href`) to specify the destination path or URL.
|
|
12
|
+
|
|
13
|
+
The component also accepts a `style` prop for custom styles, a `theme` prop for theme-based styling, `push` to use router push instead of navigate, and `replace` to replace the current history entry instead of adding a new one.
|
|
12
14
|
|
|
13
15
|
```jsx
|
|
14
16
|
import { Link } from 'startupjs-ui'
|
|
@@ -26,7 +28,7 @@ return (
|
|
|
26
28
|
|
|
27
29
|
## Different display
|
|
28
30
|
|
|
29
|
-
|
|
31
|
+
The `display` prop has two options: `'inline'` and `'block'`. If not specified, it is auto-detected based on the type of `children` -- string children render as `'inline'`, and everything else renders as `'block'`. The two display modes have different visual appearances.
|
|
30
32
|
|
|
31
33
|
```jsx example
|
|
32
34
|
return (
|
|
@@ -44,7 +46,7 @@ return (
|
|
|
44
46
|
|
|
45
47
|
## Colors
|
|
46
48
|
|
|
47
|
-
To change link color pass the
|
|
49
|
+
To change the link color, pass the `color` prop. This only applies when `display` is `'inline'`.
|
|
48
50
|
|
|
49
51
|
```jsx example
|
|
50
52
|
return (
|
|
@@ -59,7 +61,7 @@ return (
|
|
|
59
61
|
|
|
60
62
|
## Bold link
|
|
61
63
|
|
|
62
|
-
To make link text bold pass the
|
|
64
|
+
To make the link text bold, pass the `bold` prop.
|
|
63
65
|
|
|
64
66
|
```jsx example
|
|
65
67
|
return (
|
|
@@ -71,7 +73,7 @@ return (
|
|
|
71
73
|
|
|
72
74
|
## Italic link
|
|
73
75
|
|
|
74
|
-
To make link text italic pass the
|
|
76
|
+
To make the link text italic, pass the `italic` prop.
|
|
75
77
|
|
|
76
78
|
```jsx example
|
|
77
79
|
return (
|
|
@@ -83,7 +85,7 @@ return (
|
|
|
83
85
|
|
|
84
86
|
## Hover style
|
|
85
87
|
|
|
86
|
-
You can change hover style like in [Div component](/docs/Div) by passing `variant='highlight'
|
|
88
|
+
You can change the hover style like in the [Div component](/docs/Div) by passing `variant='highlight'`. This only applies when `display` is `'block'`.
|
|
87
89
|
|
|
88
90
|
```jsx example
|
|
89
91
|
const style = {
|
|
@@ -105,7 +107,7 @@ return (
|
|
|
105
107
|
|
|
106
108
|
## Button as link
|
|
107
109
|
|
|
108
|
-
|
|
110
|
+
To use a button as a link, wrap a Button component inside Link. The link will automatically pass its props through to the button.
|
|
109
111
|
|
|
110
112
|
```jsx example
|
|
111
113
|
return (
|
|
@@ -119,7 +121,7 @@ return (
|
|
|
119
121
|
|
|
120
122
|
## Actions
|
|
121
123
|
|
|
122
|
-
By passing `onPress` handler
|
|
124
|
+
By passing an `onPress` handler, you can run custom logic before the navigation occurs.
|
|
123
125
|
|
|
124
126
|
```jsx example
|
|
125
127
|
function onPress (event) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/link",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/button": "^0.1.
|
|
11
|
+
"@startupjs-ui/button": "^0.1.16",
|
|
12
12
|
"@startupjs-ui/core": "^0.1.11",
|
|
13
|
-
"@startupjs-ui/div": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
13
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
22
22
|
}
|