Data Stack

Fernando Hurtado

Open in Framer X

Data Stack

Join the Community

Behaves like a Stack, but uses a JSON file as a data source so it can render a list of items.

Getting Started

Drop the DataStack component on the canvas and follow the instructions or click here for a helpful video on how to use the DataStack.

How does it work?

When connected to a data source (e.g. JSON file or URL), the Data Stack will find the top most array in the JSON file that looks like an array of React props and will pass it onto its children.

Example:

If the contents of the JSON are

{
  "root": {
    "items": [{ "name": "John" }, { "name": "Billy" }, { "name": "Charlie" }]
  }
}

Then the DataStack will create one instance of the design component for each item. The generated react code will look approximately like this:

<DataStack>
  <YourDesignComponent name="John" />
  <YourDesignComponent name="Billy" />
  <YourDesignComponent name="Charly" />
</DataStack>

Working With Nested Data

Many APIs often structure their JSON in a nested fashion, for example:

{
  "cars": [
    { "driver": { "name": "Paul" } },
    { "driver": { "name": "Andry" } },
    {
      "driver": {
        "name": "Rob",
        "friends": [{ "name": "Charly", "name": "Paul" }]
      }
    }
  ]
}

JSON structures with this shape are generally harder to work with since it means that you need to write JavaScript to obtain nested values. The DataStack simplifies this process by flattening keys by default, so when the DataStack loads a JSON file it automatically converts it to this format:

{
  "cars": [
    { "driver_name": "Paul" },
    { "driver_name": "Andry" },
    {
      "driver_name": "Rob",
      "driver_friends_0_name": "Charly",
      "driver_friends_1_name": "Paul"
    }
  ]
}

This makes it easy to connect it to design components.

Similar Work

Special Thanks

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree