Ability to define fields programmatically
ramon-villain opened this issue · comments
-
I'm submitting a ...
[ ] bug report
[x] feature request
[ ] question about the decisions made in the repository
[x] question about how to use this project -
Summary
Hello, we are integrating FlatFile in our application but we have a specific requirement, our schema/field is based in a user selection, I'd like to know if there's any plan to support an api that allows us to provide the fields programmatically so that we don't need to destroy and mount a new FF instance every time the user changes the schema.
https://www.loom.com/share/e73fb0deccea4f798d77b16d2624eee2
- Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)
const Component = () => {
const imp = useRef<FlatfileImporter | null>(null);
const [selectedFormat, setSelectedFormat] = useState<string>('');
useEffect(() => {
if (selectedFormat) {
imp.current = new FlatFile('key', { ...opts, fields: schemas[selectedSchema] });
imp.current.setCustomer({
userId: userId || '',
companyId: account ? account.id : '',
companyName: account ? account.name : '',
email: user ? user.traits.email : '',
name: user ? `${user.traits.firstName} ${user.traits.lastName}` : '',
});
imp.current
.requestDataFromUser()
.then((results) => {
console.log(results);
})
.catch(function (error) {
console.error(error);
});
}
}, [selectedFormat]);
return (
<>
<button onClick={() => setSelectedFormat('schema1')}>Schema 1</button>
<button onClick={() => setSelectedFormat('schema2')}>Schema 2</button>
</>
);
};
@ramon-villain Hi! Try using our @flatfile/react
adapter, which will allow you to add as many FlatfileButton
components as you want.
NPM: https://www.npmjs.com/package/@flatfile/react
CodeSandbox Link: https://codesandbox.io/s/multiple-flatfilebutton-l2fwl