TheSpicyMeatball / react-nanny

Utils to manage your React Children
Other
85 stars 4 forks source link

Add new features to the current function #1

Closed kozlikov closed 3 years ago

kozlikov commented 3 years ago

Hello.

It is not always convenient to pass an array as a parameter, sometimes you want to do it like this:

  // Before
  const navbar = getChildByType(children, ["LayoutNavbar"])
  const sidebar = getChildByType(children, ["LayoutSidebar"])
  const content = getChildByType(children, ["LayoutContent"])

  // Afeter
  const navbar = getChildByType(children, "LayoutNavbar")
  const sidebar = getChildByType(children, "LayoutSidebar")
  const content = getChildByType(children, "LayoutContent")

Sometimes you want to delete several elements that have already been used:

  const navbar = getChildByType(children, "LayoutNavbar"])
  const sidebar = getChildByType(children, "LayoutSidebar")
  const content = getChildByType(children, ["LayoutContent"])
  // Before
  const otherChildren = removeChildrenByType(children, ["LayoutNavbar", "LayoutSidebar", "LayoutContent"])
  // After (because it will be more convenient)
  const otherChildren = removeChildrenByType(children, [navbar, sidebar, content])

Unfortunately, this is still all I want to offer after 5 minutes of using this library. 😄

TheSpicyMeatball commented 3 years ago

Great idea! I will try to incorporate this into the lib. Thanks so much for trying out the lib and giving feedback!

TheSpicyMeatball commented 3 years ago

@kozlikov I've updated the lib to v2.2.0 so you can now pass in a React.ReactNode like you were asking for. So now you can:

import { getChildByType, removeChildrenByType } from 'react-nanny';
import MyComponent from './MyComponent';

const child = getChildByType(children, [MyComponent]);
...
removeChildrenByType(children, [child]);

I also should have realized this yesterday, but this was also an option for you (and still is):

import { getChildByType, removeChildrenByType, typeOfComponent } from 'react-nanny';
import MyComponent from './MyComponent';

const child = getChildByType(children, [MyComponent]);
...
removeChildrenByType(children, [typeOfComponent(child)]);

Thanks again for the feature suggestion!