This repo is a mono-repo for npm @tamagui-extras/*. Additional components and functionalities extend the
UI framework tamagui
📦 @tamagui-extras Storybook
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 solitoFollow 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 onreact-hook-form@tamagui-extras/link- link components - based onsolito@tamagui-extras/file[link] - file components - based onexpo-document-picker@tamagui-extras/youtube[link] - youtube iframe component@tamagui-extras/video[link] - video components - based onexpo-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.
You have to manually add following dependencies for Expo native builds:
yarn add expo-linear-gradient
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
"resolutions": {
"@react-native-community/datetimepicker": "7.2.0"
},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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent