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: 27 days 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 (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-13T13:25:30.000Z (almost 2 years ago)
• Last Synced: 2024-09-26T00:28:02.490Z (about 1 month 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 :)