score:0
i overhauled childrenof
with support for react-hot-loader 4.x:
import { arecomponentsequal } from 'react-hot-loader';
export function childrenof(...types) {
return requirable((props, propname, componentname, location, propfullname) => {
const component = props[propname];
if(!location) {
location = 'prop';
}
if(!propfullname) {
propfullname = propname;
}
const check = c => types.some(type => arecomponentsequal(type,c.type));
const valid = array.isarray(component) ? component.every(check) : check(component);
if(!valid) {
return new error(
`invalid ${location} \`${propfullname}\` supplied to \`${componentname}\`. every element must be a <${types.map(t => getdisplayname(t)).join('|')}>.`
);
}
return null;
});
}
function requirable(predicate) {
const proptype = (props, propname, ...rest) => {
// don't do any validation if empty
if(props[propname] === undefined) {
return null;
}
return predicate(props, propname, ...rest);
};
proptype.isrequired = (props, propname, componentname, ...rest) => {
// warn if empty
if(props[propname] === undefined) {
return new error(`required prop \`${propname}\` was not specified in \`${componentname}\`.`);
}
return predicate(props, propname, componentname, ...rest);
};
return proptype;
}
usage example:
export function tbody({children, ...attrs}) {
return <tbody {...attrs}>{children}</tbody>;
}
tbody.proptypes = {
children: wxtypes.childrenof(trow),
};
score:4
did some digging, came up with this helper function based on josephmartin09's solution:
export function childrenof(...types) {
let fieldtype = proptypes.shape({
type: proptypes.oneof(types),
});
return proptypes.oneoftype([
fieldtype,
proptypes.arrayof(fieldtype),
]);
}
usage:
columncontainer.proptypes = {
children: childrenof(column).isrequired,
};
it's not ideal because it doesn't support native dom elements like 'div'
and the error message is worthless, but it'll do for now.
Source: stackoverflow.com
Related Query
- PropTypes in functional stateless component
- React: PropTypes in stateless functional component
- only allow children of a specific type in a react component
- React propTypes component class?
- React: Hide a Component on a specific Route
- The right React Component PropTypes for es6 (Weak) Maps, Sets
- Prevent React from re-rendering a specific child component
- ReactJS component PropTypes - specify a function type with a set number parameters
- React proptypes component vs element
- Component which prop must be an array of specific React elements
- How to pass style props for a specific component in react-native
- Next.js Opt out of Layout Component for specific pages from _app.js
- What is the correct pattern in React JS to invoke a component method on specific props change?
- Excluding <Header /> component on a specific page with react-router
- How can I search for a component with specific key in React Developer Tools?
- Use TypeScript Enum with PropTypes to define React Component props
- react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link
- Next.js context provider wrapping App component with page specific layout component giving undefined data
- React - how to determine if a specific child component exists?
- Enable component specific hot reloading?
- Clearing specific redux state before rendering component
- How to declare proptypes to validate an array of specific strings?
- What is the correct PropTypes for component or element
- Remove a specific table row on onClick event in React component
- Accessing all props in nested propTypes in a React component
- Should we import a whole library or a specific individual component when using along Create-React-App?
- Update specific component instance in React.js based on an ID
- PropTypes of specific component?
- How to import a React proptypes typed component as type any into a React Typescript component
- PropTypes component checking equivalent in Flow
More Query from same tag
- Missing sourcemaps in Typescript + Webpack project
- dispatch data to firebase with react/redux
- Timestamp format is not supporting the React `react-datepicker` as default value
- redux-form - Uncaught Error: `mapDispatchToProps`
- ReactJS + Docker-Compose ERROR | "Could not find a required file"
- How to re-render the same component being used in different routes?
- CanĀ“t access props after using CombineReducer
- Node JS | TypeError: Cannot read property 'p_nome' of undefined
- How to check value of div property in react
- Unit Test function in ReactJS
- Best way to use setInterval inside React useEffect in countdown timer
- React child component does re-render when prop changes value
- Drag up a ScrollView then continue scroll in React Native
- React 17.0.1: Invalid hook call. Hooks can only be called inside of the body of a function component
- Formik - highlight input green when field is valid
- head tags doesn't change in dynamic page with next/head
- React : Pagination is not working properly
- Type 'AppOneType | AppSecondType' is not assignable to type 'AppOneType'
- how to render content in the component that is loaded by useEffect- React
- Parsing error: Unexpected token, expected ";" whenever I add a constructor?
- How to develop react app via online development
- How to reset the form after submit or after clicking on cancel button using formik
- Can't render image from path in React
- React Router Dom, update component based on URL fails
- Mutliple event's to listen for in a input element (Reactjs)
- function in child component can't setState in parent component
- Error: Invariant failed: You should not use <Link> outside a <Router> Anyone?
- Serving a create-react-app with Flask "Uncaught SyntaxError: Unexpected token <"
- How to reach a Context API method inside of a helper function?
- react-player and authorization required problem