Items

Add and remove items

To add orremove Items the MuuriComponent just have to be re-rendered with different children.
As you will see in the example below, it is good practice to store the Items data in the component state, modifyng this state will allow us to add or remove the Items we want.

const App = () => {

// Items.

const [items, setItems] = useState([{id: '1'}, {id: '2'}, {id: '3'}]);

// Items to components.

const children = items.map((item) => <Item key={item.id} />);

// The 'setItems' call will re-render the component with different items.

const add = (id) => setItems(items.concat({id}));

const remove = (id) => setItems(items.filter((item) => item.id !== id));

// Render.

return <MuuriComponent>{children}</MuuriComponent>;

};

It's possible to both remove and add Items in a single re-render.

Add in position 📍

The new Items will be added in the same position in which they have been added in the children array.

// Will insert the new item in the

// position represented by the index value

const addAt = (id, index) => {

setItems([...items.slice(0, index), {id}, ...items.slice(index)]);

};

info

If a sort is used, it will have priority over choosing the position of the added items.

Visibility 👀

An Item can be added as visible or hidden based on the CSS display property which can be block or none. By default all added Items are shown, to change this you need to edit the addOptions property.

<MuuriComponent addOptions={{show: false}} />

info

If a filter is used, it will have priority over choosing to show/hide items.

Style features 👗

• It's possible to control the gaps between the Items by giving some margin to the Items (outer) elements.
• It's possible to see the showing animations when an Item is added by setting the CSS display property of the Item (outer) element to none.