adaptive icon indicating copy to clipboard operation
adaptive copied to clipboard

Update README/docs to omit `picture()` usage w/ Node/React

Open aflansburg opened this issue 4 years ago • 1 comments

adaptive/source/tree.ts only exports one method which is makePictureTree() https://github.com/filestack/adaptive/blob/2863db39ef1ddf9490d8ff690625ae5d055bfdd4/src/tree.ts#L321

However, README references a picture() method. I haven't delved too much into this so excuse my poor usage of the utility as far as options go but it appears I can do:

<GridList cellHeight={160} cols={3}>
      {hits
        .filter(hit => !hit.filename.toLowerCase().includes('heic'))
        .map(tile => {
          const options = {
            sizes: { fallback: '20vw' },
            resolutions: [540, 1080]
          };
          const tree = makePictureTree(tile.objectID, options);
          console.log(tree);
          const renderImage = imageObj => <img alt={tile.filename} {...imageObj} />;
          return (
            <GridListTile key={tile.image} cols={1} style={{ minHeight: 250 }}>
              <picture>{renderImage(tree.img)}</picture>
            </GridListTile>
          );
        })}
    </GridList>

Using Material UI GridList and Algolia React InstantSearch currently in a test project.

aflansburg avatar Jan 05 '21 16:01 aflansburg

@aflansburg adaptive/src/index.ts exports the fsAdaptive constant, which is defined as: fsAdaptive = { picture }

So you can import the picture function this way:

import { fsAdaptive } from 'filestack-adaptive'
const { picture } = fsAdaptive

geeosh avatar Mar 01 '23 17:03 geeosh