https://github.com/dohomi/tamagui-kitchen-sink

Home of tamagui-extras, a component library which extends Tamagui with additional features..
https://github.com/dohomi/tamagui-kitchen-sink

design-system expo react-hook-form react-native react-native-web react-navigation solito tamagui

Last synced: about 2 months ago
JSON representation

Home of tamagui-extras, a component library which extends Tamagui with additional features..

• Host: GitHub
• URL: https://github.com/dohomi/tamagui-kitchen-sink
• Owner: dohomi
• Created: 2022-08-23T07:19:02.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-25T06:30:21.000Z (6 months ago)
• Last Synced: 2024-07-19T03:37:10.707Z (about 2 months ago)
• Topics: design-system, expo, react-hook-form, react-native, react-native-web, react-navigation, solito, tamagui
• Language: TypeScript
• Homepage: https://tamagui-extras.vercel.app/
• Size: 23.9 MB
• Stars: 186
• Watchers: 5
• Forks: 21
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome - dohomi/tamagui-kitchen-sink - Home of tamagui-extras, a component library which extends Tamagui with additional features.. (TypeScript)

README

        
# Additional components for Tamagui

## 🔦 About

This repo is a mono-repo for npm `@tamagui-extras/*`. Additional components and functionalities extend the

UI framework `tamagui`

## 📦 `@tamagui-extras` [Storybook](https://tamagui-extras.vercel.app/)

Overview of all components build on top of `tamagui`

[Storybook Demo](https://tamagui-extras.vercel.app/) to see all components in action.

### Requirement

Install peer dependencies

```sh

# yarn add tamagui @tamagui/themes solito

```

Follow the installation [instructions](https://tamagui.dev/docs/intro/installation) of the tamagui framework.

### Packages

`@tamagui-extras` organisation exports following packages:

* `@tamagui-extras/core`[[link]](https://tamagui-extras.vercel.app/?path=/docs/core-content-alert--documentation) - core

  components

* `@tamagui-extras/form`[[link]](https://tamagui-extras.vercel.app/?path=/docs/form-autocomplete--documentation) - form

  components - based on `react-hook-form`

* `@tamagui-extras/link` - link components - based on `solito`

* `@tamagui-extras/file`[[link]](https://tamagui-extras.vercel.app/?path=/docs/file-file-picker--documentation) - file

  components - based on `expo-document-picker`

* `@tamagui-extras/youtube`[[link]](https://tamagui-extras.vercel.app/?path=/docs/youtube-youtube-embed--documentation) -

  youtube iframe component

* `@tamagui-extras/video`[[link]](https://tamagui-extras.vercel.app/?path=/docs/video-video--documentation) - video

  components - based on `expo-av`

* `@tamagui-extras/rich-text`[[link]](https://tamagui-extras.vercel.app/?path=/docs/richtext-tiptap-editor--documentation) -

  rich text editor web only: `tiptap`

* `@tamagui-extras/date`[[link]](https://tamagui-extras.vercel.app/?path=/docs/date-date-selection--documentation) -

  date

  picker and selections

### Important NextJS config

Due to external dependencies`@tamagui-extras/*`utilizes some components which needs to be transpiled before you are able

to

start.

Currently following components must be

transpiled as you can see in

the [NextJS app](https://github.com/dohomi/tamagui-kitchen-sink/blob/master/apps/next/next.config.js#L16).

### Installation | Troubleshoot Expo

You have to manually add following dependencies for Expo native builds:

```

yarn add expo-linear-gradient

```

#### Datepicker `@tamagui-extras/date`

The Datepicker component uses `@react-native-community/datetimepicker` for native builds. You have to manually install the package in Expo

```

yarn add @react-native-community/datetimepicker

```

While writing this docs there has been issues reported with mismatching versioning so make sure to pin the right version in your root package.json

```json

"resolutions": {

    "@react-native-community/datetimepicker": "7.2.0"

},

```

### Adjusting the build

Add `@tamagui-extras/*` to the `next.config.js` or `babel.config.js` file to transpile the package.

```

{

  loader: 'tamagui-loader',

  options: {

    config: './tamagui.config.ts',

    components: [

      '@tamagui-extras/core',

      '@tamagui-extras/form',

      // add any other packages which uses Tamagui

      'tamagui'

    ]

  }

}

```

#### Good to know

Everytime you face the situation that an error message appears similar

to `SyntaxError: Cannot use import statement outside a module` you might use an node module which is not transpiled for

web.

### Components

All components are prefixed with `Lm[ComponentName]` to have an easy identifier which component belongs to this package.

Code example:

```tsx

import {LmFormRhfProvider, LmInputRhf, LmSubmitButtonRhf} from "@tamagui-extras/form";

import {LmAlert} from "@tamagui-extras/core";

import console = require("console");

function MyForm() {

    return (

        

            Some important message

            

             {

                console.log(data)

            }}>Submit

        

    )

}

```

### Upgrade Guide >= 0.16

For better code split experience `tamagui-extras` is deprecated and `@tamagui-extras` organisation holds all projects.

#### Links

[tamagui](https://tamagui.dev/)