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

package/README.md

@@ -1,71 +1,75 @@
-# Getting Started
+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.
 
-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.
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
 
-## Installation
+## Get Started
 
-Install the package into your project via command line.
+### Add Skel Provider
 
-```bash
-npm install @skel-ui/react
-```
+Wrap your application with Skel UI provider.
 
-## Importing CSS
 
-Import the CSS file into the root of your application.
+```tsx
+import * as Skel from "@skel-ui/react-native";
 
-```js
-import "@skel-ui/react/styles.css";
+export default function App() {
+  return <Skel.Provider> ... </Skel.Provider>;
+}
 ```
 
-## Start crafting UI
+### Implement Skel UI
 
 Now it's time for you to craft your user interface to life!
 
-```jsx
-import * as Skel from "@skel-ui/react";
-import Image from "next/image";
+```tsx
+import * as Skel from "@skel-ui/react-native";
+import RN from "react-native";
 
-function Profile() {
-  const { user, isLoading } = useProfile();
+export default function PostCard() {
+  const { post, isLoading } = usePost();
 
   return (
     <Skel.Root isLoading={isLoading}>
-      <Skel.Item className="user-avatar">
-        <Image src={user.profile} />
-      </Skel.Item>
-      <Skel.Item as="h1" className="user-email">
-        {user.email}
-      </Skel.Item>
+      <RN.View style={styles.card}>
+        <Skel.Image src={post?.image} style={styles.cardImage} />
+        <Skel.Text sw="65%" style={styles.cardTitle}>
+          {post?.title}
+        </Skel.Text>
+        <Skel.Text numberOfLines={3} style={styles.cardDescription}>
+          {post?.description}
+        </Skel.Text>
+      </RN.View>
     </Skel.Root>
   );
 }
-```
-
-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>` .
-
-## Customization
-
-Customize the default color and border-radius of skeleton using css variables.
 
-```css title="global.css"
-:root {
-    --skel-ui-color1: #a1a1aa;
-    --skel-ui-color2: #e4e4e7;
-    --skel-ui-radius: 0.25rem;
-}
+const styles = RN.StyleSheet.create({
+  card: {
+    width: 320,
+    padding: 10,
+    marginHorizontal: "auto",
+    borderWidth: 1,
+    borderColor: "#e2e8f0",
+    borderRadius: 8,
+  },
+  cardImage: {
+    borderRadius: 4,
+    aspectRatio: 800 / 530,
+  },
+  cardTitle: {
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 24,
+    lineHeight: 28,
+    fontWeight: 800,
+  },
+  cardDescription: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
 ```
 
-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.
-
-```css
-/* This style will be applied during loading. */
-.user-email[data-loading="true"] {
-  width: 5rem;
-}
+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>` .
 
-/* This style will be applied after loading is done. */
-.user-email[data-loading="false"]:hover {
-  background: #f97316;
-}
-```
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react-native",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.e84c1ff",
+  "version": "1.0.0-alpha.f24f3db",
   "license": "MIT",
-  "description": "Small but mighty skeleton loading for React Native",
+  "description": "Lightweight and powerful skeleton loading library for React.",
   "files": [
     "dist"
   ],