https://github.com/utsavdotpro/twx-rn
A tiny utility for constructing styles object using tailwind-rn for your ReactNative projects
https://github.com/utsavdotpro/twx-rn
clsx react-native tailwind tailwind-rn
Last synced: 6 months ago
JSON representation
A tiny utility for constructing styles object using tailwind-rn for your ReactNative projects
- Host: GitHub
- URL: https://github.com/utsavdotpro/twx-rn
- Owner: utsavdotpro
- Created: 2022-09-24T15:33:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-13T13:25:30.000Z (over 3 years ago)
- Last Synced: 2025-02-24T19:40:08.401Z (over 1 year ago)
- Topics: clsx, react-native, tailwind, tailwind-rn
- Language: TypeScript
- Homepage: https://npmjs.com/package/twx-rn
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Twx
A tiny utility for constructing styles object using [tailwind-rn](https://www.npmjs.com/package/tailwind-rn) for your ReactNative projects. It uses the infamous [clsx](https://github.com/lukeed/clsx) package behind the hood for generating className strings conditionally.
## Install
````bash
yarn add twx-rn
# or
npm install twx-rn
````
## Getting Started
The `twx` generates the styles object using the [tailwind-rn](https://www.npmjs.com/package/tailwind-rn) library, so you need to have it installed and configured.
````bash
yarn add tailwind-rn
# or
npm install tailwind-rn
````
````bash
npx setup-tailwind-rn # Generate the config file
````
See full [documentation](https://www.npmjs.com/package/tailwind-rn).
## Usage
The `twx()` supports all the conditions as the `clsx` package, see [here](https://github.com/lukeed/clsx#usage).
_Basic usage_
````js
import twx from 'twx-rn';
// or
import { twx } from 'twx-rn';
Hello Tailwind!
````
## Recommended Usage
> This example is in Typescript
### How?
Define type for your react native components
```js
// types.ts
import { ViewProps } from "react-native";
export type ComponentProps = {
style?: ViewProps["style"];
children?: React.ReactNode;
className?: string;
} & T;
export interface Component extends React.FC> {}
```
Create a HOC
````js
// with-class-name.tsx
import { Component, ComponentProps } from "@appTypes/.";
import twx from "twx-rn";
const withClassName =
(C: Component) =>
(props: ComponentProps) => {
const { style, className } = props;
return ;
};
export default withClassName;
````
Create your component
```js
// HR.tsx
import { Component } from "@appTypes/.";
import { View } from "react-native";
import twx from "twx-rn";
import withClassName from "@hoc/with-class-name";
type Props = {
// your extra props
}
const HR: Component = ({ style }) => {
return ;
};
export default withClassName(HR);
```
Use your component
```js
// App.tsx
// or
```
### Why?
- Better code readability
- Easier migration from React code
- IDE class name recommendations start working
## Contribution
See a place where you can improve? See a grammatical mistake? Or want to add a entirely new feature?
All is welcomed, feel free to raise a Pull Request or create and Issue :)