https://github.com/yet3/react-native-quick-style
Make changing often used styles on your components easier.
https://github.com/yet3/react-native-quick-style
Last synced: over 1 year ago
JSON representation
Make changing often used styles on your components easier.
- Host: GitHub
- URL: https://github.com/yet3/react-native-quick-style
- Owner: yet3
- License: mit
- Created: 2023-01-26T22:02:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-07T12:48:11.000Z (over 3 years ago)
- Last Synced: 2025-03-10T21:04:48.831Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 614 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @yet3/react-native-quick-style
Make changing often used styles on your components easier.
Expo snack: https://snack.expo.dev/@yet3/yet3-react-native-quick-style-snack
## Installation
```sh
npm install @yet3/react-native-quick-style
```
or
```sh
yarn add @yet3/react-native-quick-style
```
## Usage
```ts
import {
qs,
qsPrefix,
withQuickStyle,
QsProps,
} from '@yet3/react-native-quick-style';
const qsConfig = qs({
style: {
props: {
mt: 'marginTop',
mb: 'marginBottom',
mr: 'marginRight',
ml: 'marginLeft',
bgColor: (_: 'red' | 'blue' | 'yellow') => 'backgroundColor',
size: (value: 'sm' | 'lg') => {
return {
width: value === 'sm' ? 50 : 100
height: value === 'sm' ? 25 : 50
}
}
},
},
textStyle: {
prefix: qsPrefix('text'),
props: {
size: 'fontSize',
color: 'color',
},
},
});
interface Props extends QsProps {}
export const MyComponent = withQuickStyle(({ style, textStyle }: Props) => {
...
}, qsConfig);
```
Alternatively you can use `useQuickStyle` hook
```tsx
import {
qs,
qsPrefix,
useQuickStyle,
QsProps,
} from '@yet3/react-native-quick-style';
...
export const MyComponent = (props: Props) => {
const { style, textStyle } = useQuickStyle(qsConfig, props)
...
};
```
```tsx
```
### QsConfig
| **Name** | **Type** | **Default value** |
| :----------------: | :---------------------------: | :---------------: |
| overrideStyleProps | boolean \| undefined | true |
| stripQsProps | boolean \| undefined | false |
| prefix | string \| undefined | undefined |
| props | [QsStyleProps](#qsstyleprops) | |
```tsx
qs({
...
style: {
overrideStyleProps: true,
stripQsProps: false,
prefix: qsPrefix('myPrefix'),
props: {
size: 'fontSize', // -> myPrefixSize
color: 'color', // -> myPrefixColor
},
},
});
```
### QsStyleProps
key-value pair where key is name of qs' prop and value is name of css property:
```js
{
mt: 'marginTop',
}
```
or function returning style object or name of css property:
```js
{
size: (value: 'sm' | 'lg') => {
return {
width: value === 'sm' ? 50 : 100
height: value === 'sm' ? 25 : 50
}
},
bgColor: (_: 'red' | 'blue' | 'yellow') => 'backgroundColor',
}
```
### Options
```ts
const qsConfig = qs({
...
}, {
overrideStyleProps: true, // DEFAULT
stripQsProps: false, // DEFAULT
});
```
### LooseStringCmp
Use `LooseStringCmp` util type for nice auto-completion of literal string unions
```ts
import { LooseStringCmp } from '@yet3/react-native-quick-style';
const qsConfig = qs({
style: {
props: {
mt: (value: LooseStringCmp<'sm' | 'md' | 'lg'> | number) => {
...
return {
marginTop: ...
}
},
...
},
},
...
});
...
```
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)