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