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 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 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.
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.