Merge pull request #101 from mj-studio-library/createSxComponent

createSxComponent util

doc/docs/example-components/styled-image.mdx

@@ -4,6 +4,10 @@ sidebar_position: 4
 
 # StyledImage
 
+:::tip
+We recommand use `createSxComponent` to `Image` of React Native.
+:::
+
 ```tsx title='StyledImage.tsx'
 import type { PropsWithChildren, Ref } from 'react';
 import React, { forwardRef } from 'react';

doc/docs/example-components/styled-view.mdx

@@ -3,6 +3,10 @@ sidebar_position: 1
 title: StyledView
 ---
 
+:::tip
+We recommand use `createSxComponent` to `View` of React Native.
+:::
+
 ```tsx title='StyledView.tsx'
 import { forwardRef, Ref, PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';

doc/docs/usage/component.mdx

@@ -35,6 +35,24 @@ How to use the completed `StyledView` component is as follows.
 
 It can be defined as follows:
 
+
+### Method 1 - use `createSxComponent` HOC
+
+```tsx title="StyledView.tsx"
+import type { ComponentProps } from 'react';
+import { View } from 'react-native';
+import { createSxComponent } from '@react-native-styled-system/core';
+
+export const StyledView = createSxComponent(View)();
+export type StyledViewProps = ComponentProps<typeof StyledView>;
+```
+
+`createSxComponent` and `createSxTextComponent` are simple but may have limitations in their usage.
+
+These HOCs simply add style-related fields to the Props and create a style object to pass to the passed view.
+
+### Method 2 - use `useSx` hook manually
+
 ```tsx title="StyledView.tsx"
 import { forwardRef, Ref, PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';

example/src/components/StyledViews.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+import { Image, View } from 'react-native';
+import { createSxComponent } from '@react-native-styled-system/core';
+
+export const StyledView = createSxComponent(View)();
+export type StyledViewProps = ComponentProps<typeof StyledView>;
+
+export const StyledImage = createSxComponent(Image)();
+export type StyledImageProps = ComponentProps<typeof StyledImage>;

example/src/screen/Home.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import ExpoStatusBar from 'expo-status-bar/build/ExpoStatusBar';
 
 import { StyledButton } from '../components/StyledButton';
-import { StyledImage } from '../components/StyledImage';
 import { StyledScrollView } from '../components/StyledScrollView';
-import { StyledView } from '../components/StyledView';
+import { StyledImage, StyledView } from '../components/StyledViews';
 import { Txt } from '../components/Txt';
 import { useDarkTheme } from '../theme/AppThemeProvider';
 

packages/core/src/index.ts

@@ -6,3 +6,4 @@ export * from './hook/useSxStyle';
 export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
+export * from './util/createSxComponent';

packages/core/src/util/createSxComponent.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { SxProps, TextSxProps } from '../@types/SxProps';
+import { useSx } from '../hook/useSx';
+
+export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props);
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}
+
+export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props, { styleType: 'TextStyle' });
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}