Update README.md

Author: peldax

README.md

@@ -22,4 +22,35 @@ composer require infinityloop-dev/lazy-component
 
 ## How to use
 
-TODO
+- Create new component and extend `\Infinityloop\LazyComponent\LazyComponent` instead of `\Nette\Application\UI\Control`.
+- Trigger `handleLoadComponent` to load and redraw component.
+- Use macro `{control componentName}` to render your component as you would normally.
+- Additionaly use `{control componentName:loadComponentLink}` to get URL for `loadComponent` signal.
+    - Useful for rendering URL (eg. into data attributes) so you can easily trigger signal from javascript.
+- Make sure `LazyCompoennt::render()` method is called if you choose to override it.
+    - Preferably use `beforeRender()` to pass variables into template. 
+    - `beforeRender()` method is not called when empty template is used (when component is not loaded).
+- Template for your component is automaticaly deduced to be have same name (and path) as your `.php` file.
+    - File extension is simply swapped to `.latte`.
+- By default the FontAwesome 5 spinner is used as placeholder. Override `EMPTY_TEMPLATE` constant to use different empty template file.
+
+### Example with tab and lazy tab content
+```
+<li class"tab" data-load-component="{control myComponent:loadComponentLink}">Tab name</li>
+```
+```
+<div class="tab-content">
+    {control myComponent}
+</div>
+```
+```
+$(".tab[data-load-component]").one('click',function (event) {
+    const link = $(this).data("load-component");
+    $.nette.ajax({
+        method: 'GET',
+        url: link,
+    });
+});
+```
+
+- Load event is executed only once ([jqery.one](https://api.jquery.com/one/)).