react-nanny
Advanced tools
Comparing version 2.10.0 to 2.11.0
@@ -0,1 +1,4 @@ | ||
## [2.11.0] - 2021-11-08 | ||
- Added example to main README.md | ||
## [2.9.0] - 2021-07-21 | ||
@@ -2,0 +5,0 @@ - Added overridePropsDeep |
{ | ||
"name": "react-nanny", | ||
"version": "2.10.0", | ||
"version": "2.11.0", | ||
"description": "Utils to manage your React Children; find and filter children by type or custom function, enforce child content, and more!", | ||
@@ -5,0 +5,0 @@ "main": "lib/es5/index.js", |
[![Build Status](https://travis-ci.com/TheSpicyMeatball/react-nanny.svg?branch=main)](https://travis-ci.com/TheSpicyMeatball/react-nanny) | ||
[![Coverage Status](https://coveralls.io/repos/github/TheSpicyMeatball/react-nanny/badge.svg?branch=main)](https://coveralls.io/github/TheSpicyMeatball/react-nanny?branch=main) | ||
[![dependencies Status](https://status.david-dm.org/gh/TheSpicyMeatball/react-nanny.svg?path=dist)](https://david-dm.org/TheSpicyMeatball/react-nanny?path=dist) | ||
[![peerDependencies Status](https://status.david-dm.org/gh/TheSpicyMeatball/react-nanny.svg?path=dist&type=peer)](https://david-dm.org/TheSpicyMeatball/react-nanny?path=dist&type=peer) | ||
@@ -20,3 +18,3 @@ # react-nanny | ||
<p><b>Version:</b> 2.10.0</p> | ||
<p><b>Version:</b> 2.11.0</p> | ||
@@ -27,2 +25,39 @@ <h3>Dependencies</h3> | ||
<h2>Example</h2> | ||
<p>This is simple example of how you can program defensively (your consumer can't just throw anything unexpected in children and have it render) and it shows how you can manipulate your children to place them anywhere in the rendered output.</p> | ||
<p>Below, we have a <code>ToDo</code> list of <code>Items</code>. We first get all child <code>Items</code>βall other children will be ignored. We then find two lists of children that are completed and incomplete.</p> | ||
``` | ||
import React from 'react'; | ||
import { getChildrenByType, getChildren } from 'react-nanny'; | ||
import Item from './Item'; | ||
export const ToDoList ({ children }) => { | ||
// Get all children of type Item | ||
const items = getChildrenByType(children, [Item]); | ||
// Find all incomplete and complete Items | ||
const incomplete = getChildren(items, child => !child.props.completed); | ||
const completed = getChildren(items, child => child.props.completed); | ||
return ( | ||
<> | ||
<div> | ||
<h3>To Do</h3> | ||
<ul> | ||
{incomplete} | ||
</ul> | ||
</div> | ||
<div> | ||
<h3>Completed</h3> | ||
<ul> | ||
{completed} | ||
</ul> | ||
</div> | ||
</> | ||
); | ||
}; | ||
``` | ||
<h2>Summary of Utils</h2> | ||
@@ -29,0 +64,0 @@ |
152228
254