@skel-ui/react 0.1.0-alpha.9764c85 → 0.1.1
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/README.md +70 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# Getting Started
|
|
2
|
+
|
|
3
|
+
Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context. Learn more [here](https://skel-ui.augustin.zip).
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Install the package into your project via command line.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @skel-ui/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Importing CSS
|
|
14
|
+
|
|
15
|
+
Import the CSS file into the root of your application.
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import "@skel-ui/react/styles.css";
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Start crafting UI
|
|
22
|
+
|
|
23
|
+
Now you are ready to develop your UI.
|
|
24
|
+
|
|
25
|
+
```jsx
|
|
26
|
+
import Skel from "@skel-ui/react";
|
|
27
|
+
import Image from "next/Image";
|
|
28
|
+
|
|
29
|
+
function Profile() {
|
|
30
|
+
const { user, isLoading } = useProfile();
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<Skel.Root isLoading={isLoading}>
|
|
34
|
+
<Skel.Item className="user-avatar">
|
|
35
|
+
<Image src={user.profile} />
|
|
36
|
+
</Skel.Item>
|
|
37
|
+
<Skel.Item as="h1" className="user-email">
|
|
38
|
+
{user.email}
|
|
39
|
+
</Skel.Item>
|
|
40
|
+
</Skel.Root>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
|
|
46
|
+
|
|
47
|
+
## Customization
|
|
48
|
+
|
|
49
|
+
Customize the default color and border-radius of skeleton using css variables.
|
|
50
|
+
|
|
51
|
+
```css title="global.css"
|
|
52
|
+
:root {
|
|
53
|
+
--skel-ui-color: #cbd5e1;
|
|
54
|
+
--skel-ui-radius: 0.5rem;
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
/* This style will be applied during loading. */
|
|
62
|
+
.user-email[data-loading="true"] {
|
|
63
|
+
width: 5rem;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* This style will be applied after loading is complete. */
|
|
67
|
+
.user-email[data-loading="false"]:hover {
|
|
68
|
+
background: #f97316;
|
|
69
|
+
}
|
|
70
|
+
```
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skel-ui/react",
|
|
3
3
|
"author": "https://github.com/sudoaugustin",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"description": "Next era of skeleton loading for
|
|
6
|
+
"description": "Next era of skeleton loading for React",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist"
|
|
9
9
|
],
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"./styles.css": "./dist/styles.css"
|
|
31
31
|
},
|
|
32
32
|
"bugs": {
|
|
33
|
-
"url": "https://github.com/sudoaugustin/
|
|
33
|
+
"url": "https://github.com/sudoaugustin/skel-ui/issues"
|
|
34
34
|
},
|
|
35
35
|
"homepage": "https://skel-ui.augustin.zip",
|
|
36
36
|
"repository": {
|
|
37
37
|
"type": "git",
|
|
38
|
-
"url": "git+https://github.com/sudoaugustin/
|
|
38
|
+
"url": "git+https://github.com/sudoaugustin/skel-ui"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@chromatic-com/storybook": "^1.9.0",
|