You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -27,8 +27,25 @@ Provides a way to styling components in React Native with better experience and
27
27
-[x] Styled function to styling component using design tokens.
28
28
-[x] Use `Stylesheet.create` instead a simple objects.
29
29
-[x] Access to `props` from styles defined into `styled` components.
30
+
-[ ] Type-safe registered tokens inside styles.
30
31
-[ ] Default design tokens.
31
32
33
+
### How to install
34
+
35
+
Add the package to your project using one of the following:
36
+
37
+
```sh
38
+
yarn add jacaranda
39
+
```
40
+
41
+
```sh
42
+
npm install jacaranda
43
+
```
44
+
45
+
```sh
46
+
npx expo install jacaranda
47
+
```
48
+
32
49
### Create your config file
33
50
34
51
To configure `Jacaranda`, create a `jacaranda.config.ts` file (`.js` works too) to define your reusable design tokens and import the `defineTokens` function.
@@ -137,6 +154,18 @@ const buttonStyles = sva({
137
154
});
138
155
```
139
156
157
+
### TypeScript
158
+
159
+
#### Extract variants from a component
160
+
161
+
You can use the `VariantProps` type to extract the variants from a component.
162
+
163
+
```tsx
164
+
import { typeVariantProps } from'jacaranda';
165
+
166
+
typeButtonProps=VariantProps<typeofbuttonStyles>;
167
+
```
168
+
140
169
### Styled Components with Design Tokens
141
170
142
171
Jacaranda provides a `styled` function similar to `styled-components` that allows you to create styled React Native components with access to your design tokens.
0 commit comments