Skip to content

Commit a1ac0f2

Browse files
committed
chore: updated documentation
1 parent a06be68 commit a1ac0f2

File tree

2 files changed

+34
-9
lines changed

2 files changed

+34
-9
lines changed

README.md

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## 🌸 Jacaranda
1+
![Discover Jacaranda](./docs/meta-jacaranda.jpg)
22

33
![NPM Version](https://img.shields.io/npm/v/jacaranda?style=flat)
44
![NPM License](https://img.shields.io/npm/l/jacaranda?style=flat)
@@ -27,8 +27,25 @@ Provides a way to styling components in React Native with better experience and
2727
- [x] Styled function to styling component using design tokens.
2828
- [x] Use `Stylesheet.create` instead a simple objects.
2929
- [x] Access to `props` from styles defined into `styled` components.
30+
- [ ] Type-safe registered tokens inside styles.
3031
- [ ] Default design tokens.
3132

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+
3249
### Create your config file
3350

3451
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({
137154
});
138155
```
139156

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 { type VariantProps } from 'jacaranda';
165+
166+
type ButtonProps = VariantProps<typeof buttonStyles>;
167+
```
168+
140169
### Styled Components with Design Tokens
141170

142171
Jacaranda provides a `styled` function similar to `styled-components` that allows you to create styled React Native components with access to your design tokens.
@@ -160,16 +189,12 @@ export const Screen = () => {
160189
};
161190
```
162191

163-
### TypeScript
164-
165-
#### Extract variants from a component
166-
167-
You can use the `VariantProps` type to extract the variants from a component.
192+
#### Access to `props` for conditional properties:
168193

169194
```tsx
170-
import { type VariantProps } from 'jacaranda';
171-
172-
type ButtonProps = VariantProps<typeof buttonStyles>;
195+
const StyledView = styled(View)((props) => ({
196+
backgroundColor: '$colors.primary50',
197+
}));
173198
```
174199

175200
Copyright @ 2025 by Javier Diaz

docs/meta-jacaranda.jpg

433 KB
Loading

0 commit comments

Comments
 (0)