adaptive
adaptive copied to clipboard
Update README/docs to omit `picture()` usage w/ Node/React
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 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