{description}
\n\n {children}\n\n\n\n Exposes simple components useful for defining entering and exiting\n transitions. React Transition Group is not an animation library\n like{' '}\n \n React-Motion\n \n , it does not animate styles by itself. Instead it exposes\n transition stages, manages classes and group elements and\n manipulates the DOM in useful ways, making the implementation of\n actual visual transitions much easier.\n
\n
\n \n {`\n# npm\nnpm install react-transition-group --save\n\n# yarn\nyarn add react-transition-group\n `.trim()}\n \n \n\n \n Since react-transition-group is fairly small, the overhead of\n including the library in your application is negligible. However,\n in situations where it may be useful to benefit from an external\n CDN when bundling, link to the following CDN:{' '}\n \n https://unpkg.com/react-transition-group/dist/react-transition-group.js\n \n
\n\n In some situations, like visual snapshot testing, it's helpful to\n disable transitions so they don't complicate the test, or introduce\n abitrary waits. To make this easier react-transition-group{' '}\n exposes a way to globally toggle transitions. When set,{' '}\n all transitions, when toggled, will immediately switch\n to their entered or exited states as appropriate.\n
\n \n {`\nimport { config } from 'react-transition-group'\n\nconfig.disabled = true\n `.trim()}\n \n \n \n\n\n Note: This does not automatically disable\n animations. It only disabled waits in
\nTransition. You may\n also have to disable animation as appropriate for the library.\n example:{' '}\n Mocking in Velocity.js\n
\n People often want to animate route transitions, which can result in\n delightful UX when used in moderation. The first instinct might be to\n use wrap all routes in TransitionGroup, but that approach\n requires hacks and falls apart easily when used with trickier components\n of React Router like Redirect. You should use{' '}\n CSSTransition for each route and manage their{' '}\n in prop on their own.\n
\n The main challenge is the exit transition because React\n Router changes to a new route instantly, so we need to keep the old\n route around long enough to transition out of it. Fortunately,{' '}\n Route\n 's children prop also accepts a function, which\n should not be confused with the render prop! Unlike the{' '}\n render prop, children function runs whether\n the route is matched or not. React Router passes the object containing a{' '}\n match object, which exists if the route matches, otherwise\n it's null. This enables us to manage the in{' '}\n prop of CSSTransition based on the presence of{' '}\n match.\n
\n Exit transitions will cause the content of routes to linger until they\n disappear, which might pose some styling challenges. Make sure that\n routes don't affect each other's layout, for example you can remove them\n from the flow of the document by using absolute or fixed positioning.\n
\n\n\n\n Note: When using React Transition Group with React Router, make\n sure to avoid using the
\nSwitchcomponent because it only\n executes the first matchingRoute. This would make the\n exit transition impossible to achieve because the exiting route will\n no longer match the current URL and thechildrenfunction\n won't execute.\n
{`<${p.replace('./', '')}>`}\n ))\n .reduce((acc, el, i) => {\n acc.push(el);\n if (i < metadata.composes.length - 1) {\n acc.push(', ');\n }\n return acc;\n }, [])}{' '}\n unless otherwise noted.\n \n \n )}\n {name}\n \n {typeInfo}\n )}\n {defaultValue.value.trim()}\n \n {displayObj(renderObject(type.value))}\n \n );\n\n return name;\n case 'union':\n return type.value.reduce((current, val, i, list) => {\n val = typeof val === 'string' ? { name: val } : val;\n let item = this.renderType({ type: val });\n\n if (React.isValidElement(item)) {\n item = React.cloneElement(item, { key: i });\n }\n\n current = current.concat(item);\n\n return i === list.length - 1 ? current : current.concat(' | ');\n }, []);\n case 'array':\n case 'Array': {\n let child = this.renderType({ type: type.value });\n\n return (\n \n {'Array<'}\n {child}\n {'>'}\n \n );\n }\n case 'enum':\n return this.renderEnum(type);\n case 'custom':\n return cleanDocletValue(doclets.type || name);\n default:\n return name;\n }\n }\n\n renderEnum(enumType) {\n const enumValues = enumType.value || [];\n return {enumValues.join(' | ')};\n }\n}\n\nComponentTemplate.propTypes = propTypes;\n\nfunction getDisplayTypeName(typeName) {\n if (typeName === 'func') {\n return 'function';\n } else if (typeName === 'bool') {\n return 'boolean';\n } else if (typeName === 'object') {\n return 'Object';\n }\n\n return typeName;\n}\n\nfunction renderObject(props) {\n return transform(\n props,\n (obj, val, key) => {\n obj[val.required ? key : key + '?'] = simpleType(val);\n },\n {}\n );\n}\n\nfunction simpleType(prop) {\n let type = prop.type || {};\n let name = getDisplayTypeName(type.name);\n let doclets = prop.doclets || {};\n\n switch (name) {\n case 'node':\n return 'any';\n case 'function':\n return 'Function';\n case 'elementType':\n return 'ReactClass