mozaika

A React component which organises an arbitrary number of elements into a neat grid.

Install

npm install --save @feds01/mozaika

Usage

import React, { Component } from 'react';

import Mozaika, { MozaikaElementProps, MozaikaStream } from 'mozaika';

type ExampleItem = {
    id: string;
    title: string;
    description: string;
};

const ChildContainer = ({ data, updateCallback, style }: MozaikaElementProps<ExampleItem>) => {
  useEffect(() => {
    updateCallback();
  }, []);

  return (
    <div style={style}>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
};



export type ExampleProps = {
  data: ExampleItem[];
};

const Example = ({ data }: ExampleProps) => {
    const [stream, setStream] = useState<MozaikaStream<ExampleItem, string>>({ data, key: '' });

    return <Mozaika
      stream={stream}
      getUniqueIdFromElement={(element: ExampleItem) => element.id}
      ExplorerElement={ChildContainer}
    />;
  }
}

Customise

Mozaika can be customised to a high level of degree via the component props:

Name	Description	Prop type	Default Value	Required
adjustScroll	Adjust the Y-scroll position when container/window gets resized	bool	true	false
backgroundColour	The background colour of the gallery	string	#0f0f10	false
children	Any content or React Sub-tree that is loaded after the all the content is loaded.	any	N/A	false
stream	The data that is used to populate the items that are loaded into the gallery.	[object]	N/A	true
Element	The Component/Function Component that is used as an item in the gallery.	func|object	N/A	true
ElementProps	Any props that should be passed to element objects when appending them into the view.	object	N/A	false
id	The 'id' attribute of the gallery container.	string	N/A	true
loadBatchSize	The number of items that is attempted to be added when the gallery attempts to append more elements into the view.	number	15	false
loaderStrokeColour	Colour of the provided loader	string	hsl(0, 100%, 100%)	false
maxColumns	The maximum number of columns the gallery can use to display items.	number	8	false
onNextBatch	Function that is invoked to load the next batch of data. This function is only used in stream mode. The function should return a boolean vallue denoting whether there is more data to come after the present batch or not. Mozaika will attempt to load more data the next batch if the function true, and will assume the end of stream was reached otherwise.	func	N/A	true when streamMode
onLayout	Function callback that is invoked when a layout cycle is complete. The width, height, and computed styles of elements are piped into callback.	func	N/A	false
resetStreamKey	This key is used to reset a stream flow, if it changes at any point; Mozaika will assume that we begun a new stream order	any	null	false
streamMode	Flag to determine if we're expecting data to come in as a stream instead of a singular chunk	bool	false	false
strictOrder	Forces layout of items to be in the exact order given by the caller. No height optimisations will be carried out if 'strict' order is specified.	bool	false	false

License

MIT © feds01