fix(readme): update readme

Author: Setsun

README.md

@@ -2,33 +2,49 @@
 
 An animation component library & higher-order component for generating easily configurable `<Transition>` components from `react-transition-group`.
 
-`react-transition-components` is roughly 3 kB gzipped, has peer dependencies on `react` and `react-transition-group`, and supports `webpack` tree-shaking by default: https://bundlephobia.com/result?p=react-transition-components
+`react-transition-components` is 3 kB gzipped, has peer dependencies on `react` and `react-transition-group`, and supports `webpack` tree-shaking by default: https://bundlephobia.com/result?p=react-transition-components
 
-`npm i react-transition-components`
+```
+yarn install react-transition-components
+```
 
-# Motivation
-The drive behind `react-transition-components` comes from being able to create common transition components for React easily using the tried and true `react-transition-group`.
+## Motivation
 
-Not only that, but these components need to be easily configurable with a simple API, and minimal context switching.
+`react-transition-components` has 2 goals:
+- Provide a component library of common lightweight UI transitions that are configurable on durations, delays, easings, and other animation values.
+- Make it easy to create configurable transition components by providing a `createTransition` higher-order component.
 
-`react-transition-components` aims to provide a component library of common UI transitions, and to make it easier to create re-usable transition components by providing a `createTransition` higher-order component for wrapping `<Transition>` and providing a very simple API for allowing you to express a transition in **6** lines of code in the simplest case:
+The aforementioned `createTransition` higher-order component wraps `<Transition>` from `react-transition-group`, maintains backwards compatibility with its props, and enhances it with configurable timings, delays, and easings. It provides a concise API, allowing you to express an enter/exit CSS transition in **6** lines of code in the simplest case:
 
 ```jsx
 import { createTransition } from 'react-transition-components';
 
-export const ScaleTransition = createTransition({
- from: { transform: 'scale(0)' },
- enter: { transform: 'scale(1)' }
+const CustomTransition = createTransition({
+ from: { transform: 'scale(0) skew(45deg)', opacity: 0 },
+ enter: { transform: 'scale(1) skew(0deg)', opacity: 1 }
 });
 ```
 
-# Components
-`react-transition-components` comes out of the box with multiple components that work out of the box. A Storybook is live at: https://setsun.io/react-transition-components
+## Component Library
+`react-transition-components` comes with multiple components that work out of the box. A Storybook is live at: https://setsun.io/react-transition-components
+
+The following components are included, and implement the most common CSS transitions:
+- FadeTransition for `opacity` animations
+- HeightTransition for `height` animations
+- TranslateTransition for `translate3d` animations
+- ScaleTransition for `scale3d` animations
+- RotateTransition for `rotate3d` animations
+- SkewTransition for `skew` animations
+- ClipTransition for `clip-path` animations
+
+## Higher-order component API
+### `createTransition(config: TransitionConfig)`
 
-Additionally, all components created via `createTransition` will support all props from the `<Transition>` component from `react-transition-group` (https://reactcommunity.org/react-transition-group/transition).
+The `createTransition` higher-order component returns a pre-configured `<Transition>` component that allows you to create transition components that can be used immediately, and can be configured via `props` as your animation needs change.
 
-The components also have extended functionality and have the following base props for customizing transition properties and timings:
+All components created via `createTransition` support all props from the `<Transition>` component from `react-transition-group` (https://reactcommunity.org/react-transition-group/transition).
 
+These generated components also have extended functionality and have the following base props for customizing transition properties and timings:
 ```ts
 type Props = {
  // a custom duration for your transition, with the ability
@@ -54,11 +70,7 @@ type Props = {
 }
 ```
 
-# API
-### `createTransition(config: TransitionConfig)`
-
-The `createTransition` higher-order component returns a pre-configured `<Transition>` component that allows you to create transition components that can be used immediately, and can be configured via `props` as your animation needs change. `createTransition` has the following type signature:
-
+`createTransition` has the following type signature:
 ```ts
 type TransitionConfig = {
  from: React.CSSProperties | LazyCSSProperties;
@@ -70,35 +82,78 @@ type TransitionConfig = {
 type createTransition = (config: TransitionConfig) => React.SFC<TransitionProps>
 ```
 
-Full TypeScript typings can be found at: https://github.com/Setsun/react-transition-components/blob/master/src/types/index.ts
-
 #### `from: React.CSSProperties | LazyCSSProperties`
-The `from` property is the starting style of your transition component. This is the state where your component animation will start. If the `exit` property is not specified, this is also the style that your component will transition to when it is exiting.
+The `from` property is the starting style of your transition component. This is the first state that your component animation will animate from. If the `exit` property is not specified, the `from` property is also used for the exit animation.
 
 #### `enter: React.CSSProperties | LazyCSSProperties`
-The `enter` property is the entering style of your transition component. This is the state where your component animation will animate to, and it's final resting state.
+The `enter` property is the entering style of your transition component. This is the state where your component animation will animate to, and its final resting state.
 
 #### `exit?: React.CSSProperties | LazyCSSProperties`
-The `exit` property is the exiting style of your transition component. This is an optional property, and can be useful for specifying a state to animate to, that isn't necessarily the same as your `from` state.
+The `exit` property is the exiting style of your transition component. This is an optional property for explicitly specifying a state to animate to when exiting, especially if you want an `exit` animation that is asymmetric from your `enter` animation.
 
+### Example Recipes
 
-# Example Recipes
-
-### Symmetric Enter/Exit Transition
+#### Symmetric Enter/Exit Transition
 ```jsx
 const FadeTransition = createTransition({
- from: (props) => ({ opacity: props.start }),
- enter: (props) => ({ opacity:  props.end })
+ from: { opacity: 0 },
+ enter: { opacity: 1 }
 });
-
-FadeTransition.defaultProps = { start: 0, end: 1 };
 ```
 
-### Asymmetric Enter/Exit Transition
+#### Asymmetric Enter/Exit Transition
 ```jsx
 const ScaleEnterClipExitTransition = createTransition({
- from: { transform: 'scale(0.5)', opacity: 0, clipPath: 'circle(100% at 50% 50%)' },
- enter: { transform: 'scale(1)', opacity: 1, clipPath: 'circle(100% at 50% 50%)' },
- exit: { transform: 'scale(1)', opacity: 0, clipPath: 'circle(0% at 50% 50%)' },
+ from: {
+ transform: 'scale(0.5)',
+ opacity: 0,
+ clipPath: 'circle(100% at 50% 50%)'
+ },
+ enter: {
+ transform: 'scale(1)',
+ opacity: 1,
+ clipPath: 'circle(100% at 50% 50%)'
+ },
+ exit: {
+ transform: 'scale(1)',
+ opacity: 0,
+ clipPath: 'circle(0% at 50% 50%)'
+ },
 });
 ```
+
+#### Configurable Transition
+```jsx
+const ClipScaleFadeTransition = createTransition({
+ from: (props) => {
+ return {
+ opacity: props.fade ? 0 : 1,
+ transform: `scale(${props.scale.start})`,
+ clipPath: 'circle(100% at 50% 50%)'
+ }
+ },
+ enter: (props) => {
+ return {
+ opacity: 1,
+ transform: `scale(${props.scale.end})`
+ clipPath: 'circle(100% at 50% 50%)'
+ }
+ },
+ exit: (props) => {
+ return {
+ opacity: props.fade ? 0 : 1,
+ transform: `scale(${props.scale.start})`,
+ clipPath: 'circle(0% at 50% 50%)'
+ }
+ },
+});
+
+ClipScaleFadeTransition.defaultProps = {
+ fade: true,
+ scale: {
+ start: 0.5,
+ end: 1,
+ }
+}
+
+```