@adobe/uxp-optimized
Library of react components optimized for Adobe's Unified Extensibility Platform
Last updated 12 days ago by krisnye .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @adobe/uxp-optimized 
SYNC missed versions from official npm registry.

Uxp Optimized

Introduction

Uxp Optimized is a library of browser compatible react components specifically optimized for Adobe's Unified Extensibility Platform.

Installation

npm install @adobe/uxp-optimized

or

yarn add @adobe/uxp-optimized

Virtualizer

A react virtualizer for efficiently rendering long lists of items. Similar to react-virtualized.

Usage

Virtualizer API

import Virtualizer from "@adobe/uxp-optimized/Virtualizer";

//  1. Create your items.
let items = [
    { key: "a", type: "comment", text: "Comment 1"},
    { key: "b", type: "comment", text: "Comment 2"},
    { key: "c", type: "image", image: "./path/to/image.png"},
    ...
];

//  2. Create the Virtualizer
return <Virtualizer
    items={items}
    itemKey="key"
    itemType="type"
    style={{ width: 500, height: 500}}
>
{
    //  3. Provide a function to convert items to react components.
    item => item.type === "comment" ? <div class="comment">{item.text}</div> : <img src={item.image}></img>;
}
</Virtualizer>

Samples

Basic Flow Layout Sample

Progressive Css Layout Sample

Development

Installation

git clone https://github.com/adobe/uxp-optimized.git
cd uxp-optimized
yarn install

Testing in browser

yarn watch_sample

Open http://localhost:1234 in your browser.

Note: The browser must currently support ResizeObserver api.

Testing on UXP

Install torq-native in a peer directory and then run:

./watch.sh

This should launch the sample in the UXP demo as a plugin.

Performance Tips for UXP

  • Minimize number of elements rendered per virtual item.
  • All virtual items with the same html structure should share the same "itemType".
    • Items are only recycled within the same "itemType".
  • Prefer to use display: none; instead of visibility: hidden; for invisible elements.
    • display: none means native elements don't have to be created.
    • We don't want to pay a cost for elements that only might become visible.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the MIT License. See LICENSE for more information.

Current Tags

  • 1.2.2                                ...           latest (12 days ago)

27 Versions

  • 1.2.2                                ...           12 days ago
  • 1.2.1                                ...           13 days ago
  • 1.1.2                                ...           a month ago
  • 1.1.1                                ...           2 months ago
  • 1.0.40                                ...           2 months ago
  • 1.0.39                                ...           2 months ago
  • 1.0.38                                ...           2 months ago
  • 1.0.37                                ...           3 months ago
  • 1.0.36                                ...           3 months ago
  • 1.0.35                                ...           3 months ago
  • 1.0.34                                ...           3 months ago
  • 1.0.33                                ...           3 months ago
  • 1.0.32                                ...           7 months ago
  • 1.0.31                                ...           8 months ago
  • 1.0.30                                ...           8 months ago
  • 1.0.28                                ...           8 months ago
  • 1.0.27                                ...           9 months ago
  • 1.0.26                                ...           9 months ago
  • 1.0.25                                ...           9 months ago
  • 1.0.24                                ...           9 months ago
  • 1.0.23                                ...           10 months ago
  • 1.0.22                                ...           10 months ago
  • 1.0.21                                ...           10 months ago
  • 1.0.20                                ...           10 months ago
  • 1.0.19                                ...           10 months ago
  • 1.0.18                                ...           10 months ago
  • 1.0.17                                ...           10 months ago

Copyright 2014 - 2016 © taobao.org |