From 7dc1e596ec2865f652f6992a127387ec4e413b82 Mon Sep 17 00:00:00 2001
From: Viraj-10 <virajjoshi132@gmail.com>
Date: Mon, 31 Oct 2022 15:40:45 +0530
Subject: [PATCH] feat: use sx hook

---
 docs/3.4.x/sidebar.json |  4 ++
 docs/3.4.x/use-sx.md    | 84 +++++++++++++++++++++++++++++++++++++++++
 docs/next/sidebar.json  |  4 ++
 docs/next/use-sx.md     | 84 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 176 insertions(+)
 create mode 100644 docs/3.4.x/use-sx.md
 create mode 100644 docs/next/use-sx.md

diff --git a/docs/3.4.x/sidebar.json b/docs/3.4.x/sidebar.json
index 83d67f331..26139c7ec 100644
--- a/docs/3.4.x/sidebar.json
+++ b/docs/3.4.x/sidebar.json
@@ -485,6 +485,10 @@
         {
           "id": "use-accessible-colors",
           "title": "useAccessibleColors"
+        },
+        {
+          "id": "use-sx",
+          "title": "useSx"
         }
       ]
     },
diff --git a/docs/3.4.x/use-sx.md b/docs/3.4.x/use-sx.md
new file mode 100644
index 000000000..e32960605
--- /dev/null
+++ b/docs/3.4.x/use-sx.md
@@ -0,0 +1,84 @@
+---
+id: use-sx
+title: useSx
+---
+
+`useTheme` is custom hook which provides headless NativeBase to resolve your style props.
+
+## Import
+
+```jsx
+import { useSx } from "native-base";
+```
+
+- It can be used to create custom component with NativeBase theme engine.
+- It support resopnsive styling.
+
+<br/>
+:::note
+
+useSx doesn't support `resopnsive` style with `SSR`.
+:::
+
+## Example
+
+```jsx
+import { useSx } from "native-base";
+
+export const Example = () => {
+  const sx = useSx();
+  return (
+    <View
+      style={[
+        sx({
+          p: 2,
+          bg: ["blue.300", "violet.400", "red.400"],
+          width: 48,
+          height: 48,
+        }),
+      ]}
+    >
+      <Text style={sx({ color: ["orange.900", "white", "black"] })}>
+        New Feat useSx in NativeBase
+      </Text>
+    </View>
+  );
+};
+```
+
+## Example with TypeScript
+
+```jsx
+import { useSx } from "native-base";
+import type { StyledProps } from "native-base";
+
+const textStyle: StyledProps = {
+  color: ["orange.900", "white", "black"],
+  textAlign: "center",
+};
+const containerStyle: StyledProps = {
+  p: 2,
+  bg: ["blue.300", "violet.400", "red.400"],
+  width: 48,
+  height: 48,
+};
+
+export const Example = () => {
+  const sx = useSx();
+  return (
+    <View style={sx(containerStyle)}>
+      <Text style={sx(textStyle)}>New Feat useSx in NativeBase</Text>
+    </View>
+  );
+};
+```
+
+:::note
+
+`Size` prop will be always converted into `width` and `height`.
+:::
+
+### What doesn't support?
+
+- variants can't be used in useSx.
+- Pseudo props, internal pseudo props.
diff --git a/docs/next/sidebar.json b/docs/next/sidebar.json
index 83d67f331..26139c7ec 100644
--- a/docs/next/sidebar.json
+++ b/docs/next/sidebar.json
@@ -485,6 +485,10 @@
         {
           "id": "use-accessible-colors",
           "title": "useAccessibleColors"
+        },
+        {
+          "id": "use-sx",
+          "title": "useSx"
         }
       ]
     },
diff --git a/docs/next/use-sx.md b/docs/next/use-sx.md
new file mode 100644
index 000000000..e32960605
--- /dev/null
+++ b/docs/next/use-sx.md
@@ -0,0 +1,84 @@
+---
+id: use-sx
+title: useSx
+---
+
+`useTheme` is custom hook which provides headless NativeBase to resolve your style props.
+
+## Import
+
+```jsx
+import { useSx } from "native-base";
+```
+
+- It can be used to create custom component with NativeBase theme engine.
+- It support resopnsive styling.
+
+<br/>
+:::note
+
+useSx doesn't support `resopnsive` style with `SSR`.
+:::
+
+## Example
+
+```jsx
+import { useSx } from "native-base";
+
+export const Example = () => {
+  const sx = useSx();
+  return (
+    <View
+      style={[
+        sx({
+          p: 2,
+          bg: ["blue.300", "violet.400", "red.400"],
+          width: 48,
+          height: 48,
+        }),
+      ]}
+    >
+      <Text style={sx({ color: ["orange.900", "white", "black"] })}>
+        New Feat useSx in NativeBase
+      </Text>
+    </View>
+  );
+};
+```
+
+## Example with TypeScript
+
+```jsx
+import { useSx } from "native-base";
+import type { StyledProps } from "native-base";
+
+const textStyle: StyledProps = {
+  color: ["orange.900", "white", "black"],
+  textAlign: "center",
+};
+const containerStyle: StyledProps = {
+  p: 2,
+  bg: ["blue.300", "violet.400", "red.400"],
+  width: 48,
+  height: 48,
+};
+
+export const Example = () => {
+  const sx = useSx();
+  return (
+    <View style={sx(containerStyle)}>
+      <Text style={sx(textStyle)}>New Feat useSx in NativeBase</Text>
+    </View>
+  );
+};
+```
+
+:::note
+
+`Size` prop will be always converted into `width` and `height`.
+:::
+
+### What doesn't support?
+
+- variants can't be used in useSx.
+- Pseudo props, internal pseudo props.