@utima/ui-informed v0.27.2
@utima/ui-informed
@utima/ui components that are wrapped with informed library for form handling and can be used directly in Form
component from informed.
Installation
Make sure to first install the @utima/ui
library first, follow instructions here.
npm install @utima/ui-informed informed
tailwind.config.js
In your tailwind config file, add informed components to the content array:
import path from 'node:path';
export default {
content: [
// This should be here from @utima/ui initialization ->
`${path.dirname(require.resolve('@utima/ui'))}/**/*.js`,
// This is the new line for informed components ->
`${path.dirname(require.resolve('@utima/ui-informed'))}/**/*.js`,
],
};
Usage
There are some default translations. If you want to replace them you need to wrap your application (or form) with FormTranslationsContext.Provider
with value that will replace default translations, f.e.:
const translations = {
errors: {
required: 'Tento údaj je povinný',
},
labels: {
optional: 'volitelné',
},
};
function App() {
return (
<FormTranslationsContext.Provider value={translations}>
...
</FormTranslationsContext.Provider>
);
}
Devtools
Informed already provides <Debug />
component. We have been inspired by this and created more user friendly UI around it.
You can use it by importing DevTools
component from @utima/ui-informed/devtools
package and placing it in your application (it should be placed inside Form
component since it's bound to it's state):
import { Suspense, lazy } from 'react';
// Use lazy to ensure code splitting
const UIFormDevtools = lazy(() =>
import('@utima/ui-informed/devtools').then(res => {
return {
default: res.Devtools,
};
}),
);
function App() {
return (
<Form>
<Suspense fallback={null}>
<UIFormDevtools />
</Suspense>
...
</Form>
);
}
6 days ago
14 days ago
17 days ago
17 days ago
17 days ago
21 days ago
22 days ago
22 days ago
23 days ago
24 days ago
26 days ago
28 days ago
27 days ago
28 days ago
28 days ago
28 days ago
28 days ago
29 days ago
30 days ago
29 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago