Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release #18

Merged
merged 2 commits into from
Mar 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions doc/docs/advanced/get-token-value.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
sidebar_position: 1
---

# Get token value with useSxToken

To get individual token values for a theme, you can use the `useSxToken` hook.

This is useful when it is cumbersome to get the style by passing `SxProps` to the `useSx` hook or when individual token values are needed.

```tsx
const MyView = (
{
disabled,
readonly
}:{
disabled?: boolean;
readonly?: boolean;
}) => {
const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200');
g
return <View style={{ backgroundColor }} />
}
```

:::info
To operate properly, you must use it in the Context inside `StyledSystemProvider` or pass the theme object as an option.

Additionally, `undefined` is returned when attempting to reference a key that does not exist.
:::
2 changes: 1 addition & 1 deletion doc/docs/advanced/global-theme-value.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 1
sidebar_position: 2
title: Get Theme value in global
---

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
sidebar_position: 1
---

# useSxToken를 이용해 토큰값 얻기

테마의 개별적인 토큰 값을 얻으려면 `useSxToken` 훅을 사용할 수 있습니다.

이는 `SxProps`를 `useSx` 훅에 전달해 style을 얻기 번거롭거나 개별적인 토큰 값이 필요할 때 유용합니다.

```tsx
const MyView = (
{
disabled,
readonly
}:{
disabled?: boolean;
readonly?: boolean;
}) => {
const backgroundColor = useSxToken('colors', readonly || disabled ? 'gray500' : 'gray200');

return <View style={{ backgroundColor }} />
}
```

:::info
`StyledSystemProvider`내부의 Context에서 사용하거나 옵션으로 테마 객체를 전달해야 정상적으로 동작합니다.

또한, 존재하지 않는 키를 참조하려고 할 시에도 `undefined`가 반환됩니다.
:::
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,15 @@
"source": "src/index.ts",
"module": "lib/module/index.js",
"react-native-builder-bob": {
"declarationMap": false,
"source": "src",
"output": "lib",
"targets": [
"commonjs",
"module",
"typescript"
]
],
"exclude": ["**/{__tests__,__fixtures__,__mocks__}/**", "**/*.test.*"]
},
"config": {
"commitizen": {
Expand Down
3 changes: 2 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@
"rootDir": "src",
"skipLibCheck": true
},
"include": ["src/**/*.ts", "src/**/*.tsx"]
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["**/*.test.*", "node_modules"]
}
Loading