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

Overview of all components build on top of tamagui Storybook Demo to see all components in action.

Install peer dependencies

# yarn add tamagui @tamagui/themes solito

Follow the installation instructions of the tamagui framework.

@tamagui-extras organisation exports following packages:

• @tamagui-extras/core[link] - core components
• @tamagui-extras/form[link] - form components - based on react-hook-form
• @tamagui-extras/link - link components - based on solito
• @tamagui-extras/file[link] - file components - based on expo-document-picker
• @tamagui-extras/youtube[link] - youtube iframe component
• @tamagui-extras/video[link] - video components - based on expo-av
• @tamagui-extras/rich-text[link] - rich text editor web only: tiptap
• @tamagui-extras/date[link] - date picker and selections

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.

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'
    ]
  }
}

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.

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

Code example:

import {LmFormRhfProvider, LmInputRhf, LmSubmitButtonRhf} from "@tamagui-extras/form";
import {LmAlert} from "@tamagui-extras/core";
import console = require("console");

function MyForm() {
    return (
        <LmFormRhfProvider>
            <LmAlert severity={'info'}>Some important message</LmAlert>
            <LmInputRhf name={'name'} label="Name"/>
            <LmSubmitButtonRhf onSubmit={(data) => {
                console.log(data)
            }}>Submit</LmSubmitButtonRhf>
        </LmFormRhfProvider>
    )
}

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

tamagui