Skip to content

Commit

Permalink
Merge pull request #59 from jpudysz/feature/docs
Browse files Browse the repository at this point in the history
docs: mention as const
  • Loading branch information
jpudysz authored Nov 5, 2023
2 parents af5256c + bd14bf1 commit 2743507
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 3 deletions.
2 changes: 2 additions & 0 deletions docs/src/content/docs/example/variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ const stylesheet = createStyleSheet(theme => ({
}
}))
```
Remember, that if you want to spread styles like so you need to export your theme "as const" for TypeScript.
This is how React Native types works, and you can see the same behavior with StyleSheet.create.

Now, let's create another variant, e.g., Heading:

Expand Down
10 changes: 7 additions & 3 deletions docs/src/content/docs/start/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import Seo from '../../../components/Seo.astro'
lg: 8,
xl: 12
}
}
} as const
```

or something more advanced with nested objects / functions:
Expand Down Expand Up @@ -76,9 +76,11 @@ import Seo from '../../../components/Seo.astro'
return `rgba(${rgb.at(0)}, ${rgb.at(1)}, ${rgb.at(2)}, ${opacity})`
}
}
}
} as const
```

It's good to add "as const" to the end of your theme object to make sure TypeScript knows it's a constant object and not a mutable one. It also allows you to spread your partial theme object into a full theme object without TypeScript complaining.

### Create breakpoints

There are no predefined breakpoints. You can name them anything. Just make an object with string keys and number values.
Expand All @@ -93,9 +95,11 @@ import Seo from '../../../components/Seo.astro'
xl: 1200,
superLarge: 2000,
tvLike: 4000
}
} as const
```

It's good to add "as const" to the end of your breakpoints object to make sure TypeScript knows it's a constant object and not a mutable one.

### Wrap your app with UnistylesTheme to inject theme

```tsx
Expand Down

0 comments on commit 2743507

Please sign in to comment.