Socket
Socket
Sign inDemoInstall

react-nanny

Package Overview
Dependencies
3
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.10.0 to 2.11.0

3

CHANGELOG.md

@@ -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

2

package.json
{
"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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc