tamagui-kitchen-sink
tamagui-kitchen-sink copied to clipboard
Home of tamagui-extras, a component library which extends Tamagui with additional features..
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
Overview of all components build on top of tamagui
Storybook Demo to see all components in action.
Requirement
Install peer dependencies
# yarn add tamagui @tamagui/themes solito
Follow the installation instructions of the tamagui framework.
Packages
@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
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.
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
"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:
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>
)
}
Upgrade Guide >= 0.16
For better code split experience tamagui-extras
is deprecated and @tamagui-extras
organisation holds all projects.