Skip to content

Commit 2ba3c69

Browse files
committed
Add doc section
1 parent dd0e06f commit 2ba3c69

File tree

1 file changed

+44
-5
lines changed

1 file changed

+44
-5
lines changed

src/LiveComponent/doc/index.rst

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2341,11 +2341,6 @@ If you load this URL in your browser, the ``LiveProp`` value will be initialized
23412341

23422342
The URL is changed via ``history.replaceState()``. So no new entry is added.
23432343

2344-
.. warning::
2345-
2346-
You can use multiple components with URL bindings in the same page, as long as bound field names don't collide.
2347-
Otherwise, you will observe unexpected behaviors.
2348-
23492344
Supported Data Types
23502345
~~~~~~~~~~~~~~~~~~~~
23512346

@@ -2389,6 +2384,50 @@ For example, if you declare the following bindings::
23892384
And you only set the ``query`` value, then your URL will be updated to
23902385
``https://my.domain/search?query=my+query+string&mode=fulltext``.
23912386

2387+
Controlling the Query Parameter Name
2388+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2389+
2390+
Instead of using the prop's field name as the query parameter name, you can use the ``as`` option in your ``LiveProp``
2391+
definition::
2392+
2393+
// ...
2394+
use Symfony\UX\LiveComponent\Metadata\UrlMapping;
2395+
2396+
#[AsLiveComponent]
2397+
class SearchModule
2398+
{
2399+
#[LiveProp(writable: true, url: new UrlMapping(as: 'q')]
2400+
public string $query = '';
2401+
2402+
// ...
2403+
}
2404+
2405+
Then the ``query`` value will appear in the URL like ``https://my.domain/search?q=my+query+string``.
2406+
2407+
If you need to use a custom parameter name on a specific page, you can override the mapping on a per-template basis:
2408+
2409+
.. code-block:: html+twig
2410+
2411+
{# Pass a mapping object #}
2412+
<twig:SearchModule :data-live-url-mapping-query="{ alias: 'q'}" />
2413+
2414+
{# Or configure the mapping option directly #}
2415+
<twig:SearchModule data-live-url-mapping-query-alias="q" />
2416+
2417+
This way you can also use the component multiple times in the same page and avoid collisions with parameter names:
2418+
2419+
.. code-block:: html+twig
2420+
2421+
{# First search module using 'q1' parameter #}
2422+
<twig:SearchModule data-live-url-mapping-query-alias="q1" />
2423+
2424+
{# Second search module using 'q2' parameter #}
2425+
<twig:SearchModule data-live-url-mapping-query-alias="q2" />
2426+
2427+
.. note::
2428+
2429+
You can configure the mapping in templates only if the ``url`` option is enabled in the ``#LiveProp`` attribute.
2430+
23922431
Validating the Query Parameter Values
23932432
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
23942433

0 commit comments

Comments
 (0)