\n style={{\n // The permanent styles for the component\n height: `${Math.random() * 100}px`,\n background: \"white\"\n }}\n start={{\n // The starting styles for the hidden component.\n opacity: 0,\n height: 0\n }}\n enter={{\n // These styles will be applied when the component enters\n opacity: 1,\n height: 'auto'\n background: \"green\"\n }}\n leave={{\n // these styles will be applied when the component leaves\n opacity: 0,\n height: 0,\n background: \"red\"\n }}\n >\n Hello world!\n \n);\n```\n\n## Duration, Easing, Transition Properties\n\nYou can configure `duration`, `easing`, and `transition` by:\n\n- Setting a component-wide default with the `duration`, `easing`, and `transitionProperty` props.\n- Optionally using a lifecycle specific style property like `transitionDuration`, `transitionTimingFunction`, `transitionProperty` or even `transitionDelay`.\n\nReactShow comes with a wide variety of easings built-in! See [Easing Options](#easing-options) for a full list.\n\n```javascript\nimport ReactShow from \"react-show\";\n\nconst DurationAndEasingExample = () => (\n
\n Hello world!\n \n);\n```\n\n## Lifecycle\n\nReact-Show uses the following lifecycle to determine which styles to show:\n\n**When `show === true`**\n\n- If component is not mounted\n - If `transitionOnMount === true`\n - The `start` styles are set as the initial style\n - If `transitionOnMount === false`\n - The `enter` styles are set as the initial style\n - The component is mounted\n- If component is already mounted\n - The `enter` styles are set as the initial style\n- If a `width` or `height` style is/was set to `auto`\n - The `display: block` and `overflow: hidden` styles are temporarily applied\n - The component scrollWidth/scrollHeight is measured\n - The `display: block` and `overflow: hidden` styles are removed\n- The `enter` styles are applied and component waits until all transitions complete\n- All lifecycle styles are removed and component waits until all transitions complete\n- The `onFinish` prop function is fired\n\n**When `show === false`**\n\n- If a `width` or `height` style is/was set to `auto`\n - The `display: block` and `overflow: hidden` styles are temporarily applied\n - The component scrollWidth/scrollHeight is measured\n - The `display: block` and `overflow: hidden` styles are removed\n- The `leave` or `start` styles are applied and component waits until all transitions complete\n- If `stayMounted === false`\n - The component is unmounted\n\n## Easing Options\n\nReact-Show comes packaged with some awesome easings that are accessible via `ReactShow.easings`. They are extremely simple to use too:\n\n```javascript\nimport ReactShow from \"react-show\";\n\nconst SimpleExample = () => (\n \n Hello world!\n \n);\n```\n\nBelow is a full list of the available easings exported at `ReactShow.easings`\n\n```javascript\nimport { easings } from \"react-show\";\n\neasings ===\n {\n // Cubic\n easeInCubic: \"cubic-bezier(0.550, 0.055, 0.675, 0.190)\",\n easeOutCubic: \"cubic-bezier(0.215, 0.610, 0.355, 1.000)\",\n easeInOutCubic: \"cubic-bezier(0.645, 0.045, 0.355, 1.000)\",\n\n // Circ\n easeInCirc: \"cubic-bezier(0.600, 0.040, 0.980, 0.335)\",\n easeOutCirc: \"cubic-bezier(0.075, 0.820, 0.165, 1.000)\",\n easeInOutCirc: \"cubic-bezier(0.785, 0.135, 0.150, 0.860)\",\n\n // Expo\n easeInExpo: \"cubic-bezier(0.950, 0.050, 0.795, 0.035)\",\n easeOutExpo: \"cubic-bezier(0.190, 1.000, 0.220, 1.000)\",\n easeInOutExpo: \"cubic-bezier(1.000, 0.000, 0.000, 1.000)\",\n\n // Quad\n easeInQuad: \"cubic-bezier(0.550, 0.085, 0.680, 0.530)\",\n easeOutQuad: \"cubic-bezier(0.250, 0.460, 0.450, 0.940)\",\n easeInOutQuad: \"cubic-bezier(0.455, 0.030, 0.515, 0.955)\",\n\n // Quart\n easeInQuart: \"cubic-bezier(0.895, 0.030, 0.685, 0.220)\",\n easeOutQuart: \"cubic-bezier(0.165, 0.840, 0.440, 1.000)\",\n easeInOutQuart: \"cubic-bezier(0.770, 0.000, 0.175, 1.000)\",\n\n // Quint\n easeInQuint: \"cubic-bezier(0.755, 0.050, 0.855, 0.060)\",\n easeOutQuint: \"cubic-bezier(0.230, 1.000, 0.320, 1.000)\",\n easeInOutQuint: \"cubic-bezier(0.860, 0.000, 0.070, 1.000)\",\n\n // Sine\n easeInSine: \"cubic-bezier(0.470, 0.000, 0.745, 0.715)\",\n easeOutSine: \"cubic-bezier(0.390, 0.575, 0.565, 1.000)\",\n easeInOutSine: \"cubic-bezier(0.445, 0.050, 0.550, 0.950)\",\n\n // Back\n easeInBack: \"cubic-bezier(0.600, -0.280, 0.735, 0.045)\",\n easeOutBack: \"cubic-bezier(0.175, 0.885, 0.320, 1.275)\",\n easeInOutBack: \"cubic-bezier(0.680, -0.550, 0.265, 1.550)\"\n };\n```\n\n## API\n\n#### ``\n\n###### Props\n\n| Prop | Required | Default Value | Description |\n| :------------------- | :------- | :------------- | :------------------------------------------------------------------- |\n| `show` | `true` | `false` | Determines whether to \"show\" the content or not. |\n| `duration` | | `300` | The `transition-duration` of the transition used to show the content |\n| `easing` | | `easeOutQuint` | The `transition-timing-function` used to show the content |\n| `transitionProperty` | | `all` | The `transition-property` used to show the content |\n| `preMount` | | `false` | If `true`, element will mount on first render if `show === false` |\n| `stayMounted` | | `false` | If `true`, element will stay mounted when `show === false` |\n| `transitionOnMount` | | `false` | If `true`, element will animate from the `start` style on mount |\n| `style` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |\n| `start` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |\n| `enter` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |\n| `leave` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |\n\n## Contributing\n\nWe are always looking for people to help us grow `react-show`'s capabilities and examples. If you have an issue, feature request, or pull request, let us know!\n\n## License\n\nReact Show uses the MIT license. For more information on this license, [click here](https://github.com/react-tools/react-show/blob/master/LICENSE).\n","maintainers":[{"name":"tannerlinsley","email":"tannerlinsley@gmail.com"},{"name":"zsherman","email":"zach.h.sherman@gmail.com"}],"time":{"modified":"2022-06-26T08:12:38.459Z","created":"2017-08-06T03:28:15.332Z","0.1.0":"2017-08-06T03:28:15.332Z","0.2.0":"2017-08-07T01:59:52.616Z","0.3.0":"2017-08-11T21:56:30.712Z","0.4.0":"2017-08-11T22:07:13.228Z","0.4.1":"2017-08-12T18:45:56.825Z","0.4.2":"2017-08-12T18:55:32.344Z","0.4.3":"2017-08-12T19:06:40.288Z","0.4.4":"2017-08-12T19:15:36.946Z","0.6.0":"2017-08-19T14:28:11.839Z","0.6.1":"2017-08-19T15:27:29.459Z","0.6.2":"2017-08-19T15:39:13.466Z","0.7.1":"2017-08-22T18:57:12.562Z","1.0.0":"2017-11-22T03:00:46.348Z","1.0.1":"2017-11-22T03:20:19.114Z","1.0.2":"2017-11-22T03:26:15.094Z","1.1.0":"2017-12-04T16:44:56.832Z","1.1.1":"2017-12-04T16:51:00.351Z","1.1.2":"2017-12-04T16:54:34.986Z","2.0.0-beta.0":"2017-12-12T18:04:36.825Z","2.0.0-beta.1":"2017-12-12T18:08:33.258Z","2.0.0-beta.2":"2017-12-12T21:08:53.176Z","2.0.0":"2017-12-12T21:12:49.734Z","2.0.1":"2018-01-12T18:22:43.195Z","2.0.2":"2018-01-12T19:20:47.914Z","2.0.3":"2018-01-12T19:37:44.634Z","2.0.4":"2018-01-16T22:01:49.714Z","3.0.0":"2018-05-31T21:37:05.298Z","3.0.1":"2018-06-05T07:13:44.576Z","3.0.2":"2018-06-05T07:20:04.932Z","3.0.3":"2018-09-17T23:26:42.194Z","3.0.4":"2018-09-18T19:19:49.682Z"},"keywords":["react-show","react","show","animate","ng-show","react","appear","hide","collapse"],"license":"MIT","readmeFilename":"README.md","homepage":"https://react-show.js.org/","repository":{"type":"git","url":"git+https://github.com/react-tools/react-show.git"},"author":{"name":"Tanner Linsley","email":"tannerlinsley@gmail.com"}}![\"React](\"https://github.com/react-tools/media/raw/master/logo-react-show.png\"){kind=logo}
\n![\"Join](\"https://withspectrum.github.io/badge/badge.svg\"){kind=icon}
\n\n\n![\"\"](\"https://img.shields.io/npm/dm/react-show.svg\")
\n\n\n![\"\"](\"https://img.shields.io/github/stars/react-tools/react-show.svg?style=social&label=Star\")
\n\n\n![\"\"](\"https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow\")
\n\n\n