@startupjs-ui/rank 0.1.13 → 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 +8 -0
- package/README.mdx +9 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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/rank
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @startupjs-ui/rank
|
package/README.mdx
CHANGED
|
@@ -4,7 +4,9 @@ import { Sandbox } from '@startupjs-ui/docs'
|
|
|
4
4
|
|
|
5
5
|
# Rank
|
|
6
6
|
|
|
7
|
-
Rank input
|
|
7
|
+
Rank is an input component that lets users arrange a list of options in a specific order. Items can be reordered by dragging and dropping or by selecting a position from a numbered dropdown.
|
|
8
|
+
|
|
9
|
+
The `options` prop defines the available items (as strings, numbers, or `{ value, label }` objects), while `value` holds the current ordering. Use `onChange` to receive the updated order whenever the user rearranges items. You can also apply custom `style` to the root element.
|
|
8
10
|
|
|
9
11
|
```jsx
|
|
10
12
|
import { Rank } from 'startupjs-ui'
|
|
@@ -12,6 +14,8 @@ import { Rank } from 'startupjs-ui'
|
|
|
12
14
|
|
|
13
15
|
## Simple example
|
|
14
16
|
|
|
17
|
+
Pass an array of options and track their current order with `value` and `onChange`.
|
|
18
|
+
|
|
15
19
|
```jsx example
|
|
16
20
|
const options = ['option1', 'option2', 'option3', 'option4', 'option5']
|
|
17
21
|
const [value, setValue] = useState(options)
|
|
@@ -27,6 +31,8 @@ return (
|
|
|
27
31
|
|
|
28
32
|
## Disabled
|
|
29
33
|
|
|
34
|
+
Set the `disabled` prop to prevent users from reordering items. The drag handles and position dropdowns become inactive, and the background is dimmed to indicate the disabled state.
|
|
35
|
+
|
|
30
36
|
```jsx example
|
|
31
37
|
const options = ['option1', 'option2', 'option3', 'option4', 'option5']
|
|
32
38
|
const [value, setValue] = useState(options)
|
|
@@ -43,6 +49,8 @@ return (
|
|
|
43
49
|
|
|
44
50
|
## Readonly
|
|
45
51
|
|
|
52
|
+
Set the `readonly` prop to display the ranked list as a simple numbered list without any interactive controls. This is useful for showing the final ranking result.
|
|
53
|
+
|
|
46
54
|
```jsx example
|
|
47
55
|
const options = ['option1', 'option2', 'option3', 'option4', 'option5']
|
|
48
56
|
const [value, setValue] = useState(options)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/rank",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@startupjs-ui/core": "^0.1.11",
|
|
12
|
-
"@startupjs-ui/div": "^0.1.
|
|
13
|
-
"@startupjs-ui/draggable": "^0.1.
|
|
14
|
-
"@startupjs-ui/icon": "^0.1.
|
|
15
|
-
"@startupjs-ui/select": "^0.1.
|
|
16
|
-
"@startupjs-ui/span": "^0.1.
|
|
12
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
13
|
+
"@startupjs-ui/draggable": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/icon": "^0.1.16",
|
|
15
|
+
"@startupjs-ui/select": "^0.1.16",
|
|
16
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": "*",
|
|
20
20
|
"react-native": "*",
|
|
21
21
|
"startupjs": "*"
|
|
22
22
|
},
|
|
23
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
24
24
|
}
|