I'm building an app using SvelteKit and Tailwind. I know that when using Tailwind to style it is recommended to leverage components to reduce the amount of repeated code you have to write using Tailwinds utility classes. My issue is that when making components based on HTML tags, for instance an <input> tag, dealing with props in that component that would normally just be attributes for that tag is getting overwhelming. MDN shows that the <input> tag has 31 possible attributes. I know that I won't be using all of them but going back and forth and adding them as props to a component is getting tiresome.
What is the best way to solve this problem without adding up to 31 lines of export let attribute to a component and adding them to the real HTML tag inside of the component?
Example:
<script>
export let name;
export let id;
export let type;
export let disabled;
export let required;
export let minLength;
export let maxLength;
export let min;
export let max;
export let pattern;
let value;
let borderColor = '#D1D5DB';
const inputHandler = (e) => {
if (e.target.value === '') {
borderColor = '#D1D5DB';
} else {
borderColor = '';
}
};
</script>
<input
{name}
{id}
{type}
{disabled}
{required}
{minLength}
{maxLength}
{min}
{max}
{pattern}
on:input={inputHandler}
style={`border-color: ${borderColor}`}
class="
w-full px-1 py-px mb-4 bg-transparent border-2 border-gray-300
rounded-xl last:mb-0 valid:border-emerald-300 invalid:border-rose-400
"
/>
If you want to be able to do
<MyInputField name="123" maxLength="5" type="text">
Without having to declare all these extra attribute, the best way to do so is to use the $$restProps, this object will contain all the props that have been passed to the component but have not been explicitly defined as props (exported).
<script>
export let name = "";
</script>
<input name={name} {..$$restProps}>
(here name was defined, so it will not be included in $$restProps and I had to add it myself)
Alternatively to using the $$restProps (and based on @pilchard's comment above, thanks for that) an options object could be exported, which is holding all the modified attributes values and is spread after the default attributes defined on the input element inside the component
Like this all possible attributes of the element can be used/set without having to write them all out anywhere REPL
<script>
import Input from './Input.svelte';
const options ={
type: 'number',
placeholder:'input a number',
required: true
};
</script>
<Input {options} />
<script>
export let options = {}
export let value = ''
</script>
<input type="text"
placeholder="default placeholder"
{...options}
bind:value
style:border-color="{options.required && value === '' ? 'tomato' : ''}"
class="w-full px-1 py-px mb-4 bg-transparent border-2 ..."
/>