URL Parameters

Use placeholders for dynamic parameters in your form actions, links, and datasource URLs.

What are URL Parameters?

URL Parameters allow you to accomplish the common use case of dynamic parameters in URLs, usually based on routes or user sessions. Consider the URL below.

https://example.com/users/2/comments?post=3

In order to use this URL and personalize it at runtime, Mason accepts tokenized parameters prefixed by : - so the URL above would be tokenized as:

https://example.com/users/:userId/comments?post=:postId

Any part of a URL string may be tokenized, and the token will be matched from : until the first non-alphanumeric character is encountered. You may use URL Parameters in form action attributes, link href attributes, and datasource URL attributes.

Providing URL Parameters

Provide a urlParams prop to your feature at runtime and keys will be substituted in all occurrences. For the URL above, you would provide the urlParams as follows

import React from 'react';
import { Canvas } from '@mason-api/react-sdk';

class MyFeed extends React.Component {
    render() {
        return <Canvas 
            id="YOUR_COMPONENT_ID"
            urlParams={{
                userId: 2,
                postId: 3,
            }}
        />;
    }
}