https://github.com/deepsquare-io/turbine

Efficient wrapper to build Tailwind-based React components easily.
https://github.com/deepsquare-io/turbine

Last synced: 2 months ago
JSON representation

Efficient wrapper to build Tailwind-based React components easily.

• Host: GitHub
• URL: https://github.com/deepsquare-io/turbine
• Owner: deepsquare-io
• License: mit
• Created: 2021-11-15T13:00:32.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-23T10:17:16.000Z (about 3 years ago)
• Last Synced: 2024-09-13T02:48:14.697Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 92.8 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# `@deepsquare/turbine`

Zero-dependencies efficient wrapper to build Tailwind-based React components easily.

## Dependencies

- React 17+ since we are using the new

  React [JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

- No other dependency! :tada:

## Installation

Simply use your favorite package manager and install

```shell

npm install @deepsquare/turbine

# or

yarn add @deepsquare/turbine

# or

pnpm install @deepsquare/turbine

```

## Usage

This package only contains a single function `turbine` with allow creating components.

Bootstrap-like card:

```typescript jsx

import turbine from './turbine';

const Card = turbine('div', 'px-6 py-4 rounded bg-grey-200');

export default Card;

```

Third-parameter call be used to pass defaultProperties to the underlying component.

```typescript jsx

import turbine from './turbine';

const Card = turbine('div', 'px-6 py-4 rounded bg-grey-200', {

  style: { minWidth: '320px' },

});

export default Card;

```