@skel-ui/react-native 1.0.0-alpha.e84c1ff → 1.0.0-alpha.fc281bd

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.
Files changed (2) hide show
  1. package/README.md +52 -48
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,71 +1,75 @@
1
- # Getting Started
1
+ 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.
2
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.
3
+ See the comparision [here](https://skel-ui.augustin.zip/#comparision).
4
4
 
5
- ## Installation
5
+ ## Get Started
6
6
 
7
- Install the package into your project via command line.
7
+ ### Add Skel Provider
8
8
 
9
- ```bash
10
- npm install @skel-ui/react
11
- ```
9
+ Wrap your application with Skel UI provider.
12
10
 
13
- ## Importing CSS
14
11
 
15
- Import the CSS file into the root of your application.
12
+ ```tsx
13
+ import * as Skel from "@skel-ui/react-native";
16
14
 
17
- ```js
18
- import "@skel-ui/react/styles.css";
15
+ export default function App() {
16
+ return <Skel.Provider> ... </Skel.Provider>;
17
+ }
19
18
  ```
20
19
 
21
- ## Start crafting UI
20
+ ### Implement Skel UI
22
21
 
23
22
  Now it's time for you to craft your user interface to life!
24
23
 
25
- ```jsx
26
- import * as Skel from "@skel-ui/react";
27
- import Image from "next/image";
24
+ ```tsx
25
+ import * as Skel from "@skel-ui/react-native";
26
+ import RN from "react-native";
28
27
 
29
- function Profile() {
30
- const { user, isLoading } = useProfile();
28
+ export default function PostCard() {
29
+ const { post, isLoading } = usePost();
31
30
 
32
31
  return (
33
32
  <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>
33
+ <RN.View style={styles.card}>
34
+ <Skel.Image src={post?.image} style={styles.cardImage} />
35
+ <Skel.Text sw="65%" style={styles.cardTitle}>
36
+ {post?.title}
37
+ </Skel.Text>
38
+ <Skel.Text numberOfLines={3} style={styles.cardDescription}>
39
+ {post?.description}
40
+ </Skel.Text>
41
+ </RN.View>
40
42
  </Skel.Root>
41
43
  );
42
44
  }
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
45
 
51
- ```css title="global.css"
52
- :root {
53
- --skel-ui-color1: #a1a1aa;
54
- --skel-ui-color2: #e4e4e7;
55
- --skel-ui-radius: 0.25rem;
56
- }
46
+ const styles = RN.StyleSheet.create({
47
+ card: {
48
+ width: 320,
49
+ padding: 10,
50
+ marginHorizontal: "auto",
51
+ borderWidth: 1,
52
+ borderColor: "#e2e8f0",
53
+ borderRadius: 8,
54
+ },
55
+ cardImage: {
56
+ borderRadius: 4,
57
+ aspectRatio: 800 / 530,
58
+ },
59
+ cardTitle: {
60
+ marginTop: 16,
61
+ marginBottom: 8,
62
+ fontSize: 24,
63
+ lineHeight: 28,
64
+ fontWeight: 800,
65
+ },
66
+ cardDescription: {
67
+ fontSize: 14,
68
+ lineHeight: 20,
69
+ },
70
+ });
57
71
  ```
58
72
 
59
- 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.
60
-
61
- ```css
62
- /* This style will be applied during loading. */
63
- .user-email[data-loading="true"] {
64
- width: 5rem;
65
- }
73
+ 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>` .
66
74
 
67
- /* This style will be applied after loading is done. */
68
- .user-email[data-loading="false"]:hover {
69
- background: #f97316;
70
- }
71
- ```
75
+ For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@skel-ui/react-native",
3
3
  "author": "https://github.com/sudoaugustin",
4
- "version": "1.0.0-alpha.e84c1ff",
4
+ "version": "1.0.0-alpha.fc281bd",
5
5
  "license": "MIT",
6
- "description": "Small but mighty skeleton loading for React Native",
6
+ "description": "Lightweight and powerful skeleton loading library for React.",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
@@ -55,11 +55,11 @@
55
55
  "react-native": "0.76.3",
56
56
  "typescript": "^5.7.2",
57
57
  "react-native-reanimated": "^3.0",
58
- "@skel-ui/core": "1.0.0",
59
- "commons-tsconfig": "0.0.1"
58
+ "commons-tsconfig": "0.0.1",
59
+ "@skel-ui/core": "1.0.0"
60
60
  },
61
61
  "peerDependencies": {
62
- "expo-linear-gradient": "^14.0.",
62
+ "expo-linear-gradient": "^14.0",
63
63
  "react": "^17.0 || ^18.0",
64
64
  "react-native": "*",
65
65
  "react-native-reanimated": "^3.0"