Autocomplete or custom rendering

[Zipexpo]

Any idea how to make a autocomplete input ( the same as https://mui.com/components/autocomplete/#main-content )
or how to make a custom render?

If you have any documents on how to make the custom plugin please share them to me. Thank you for reading.

[dbismut]

@Zipexpo Leva supports plugin. Please have a look at https://github.com/pmndrs/leva/tree/main/packages/plugin-bezier or any other packages as a start and feel free to ask specific question in this thread.

[Zipexpo]

SO basically, I can use https://github.com/pmndrs/leva/tree/main/packages/plugin-bezier as an example and start building the plugin?
I will try and come back if I have any questions. Thank you so much

p/s: it will be awsome if we can have document about create plugin somewhere

[dbismut]

Yes. Or any other plugin in the packages repository!

[Zipexpo]

Thank! It worked!

Although, I still don't get what is the difference of sanitize and normalize

[dbismut]

@Zipexpo Have a look at the comments here

leva/packages/leva/src/types/public.ts

Lines 282 to 305 in f5b8613

	/**
	* Normalizes the input into a { value, settings } object.
	*
	* @example
	* Let's consider a color with an inverted settings option that computes the negative
	* of that color. The plugin could look something like:
	* ```ts
	* myColorPlugin({ color: '#fff', inverted: true })
	* ```
	*
	* In that case, your normalize funciton would be something like:
	* ```ts
	* function normalize({ color, inverted }) {
	* return { value: color, settings: { inverted }}
	* }
	* ```
	*/
	normalize?: (input: Input, path: string, data: Data) => { value: Value; settings?: InternalSettings }
	/**
	* Sanitizes the user value before registering it to the store. For
	* example, the Number plugin would santize "3.00" into 3. If the provided
	* value isn't formatted properly, the sanitize function should throw.
	*/
	sanitize?: (value: any, settings: InternalSettings, prevValue: any, path: string, store: StoreType) => Value