chore: restructure readme (#199)

Author: mikemajara

README.md

@@ -8,12 +8,94 @@
 
 **react-spring-bottom-sheet** is built on top of **[react-spring]** and **[react-use-gesture]**. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
 
-# Install
+# Installation
 
 ```bash
 npm i react-spring-bottom-sheet
 ```
 
+# Getting started
+
+## Basic usage
+
+```jsx
+import { useState } from 'react'
+import { BottomSheet } from 'react-spring-bottom-sheet'
+
+// if setting up the CSS is tricky, you can add this to your page somewhere:
+// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
+import 'react-spring-bottom-sheet/dist/style.css'
+
+export default function Example() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <BottomSheet open={open}>My awesome content here</BottomSheet>
+    </>
+  )
+}
+```
+
+## TypeScript
+
+TS support is baked in, and if you're using the `snapTo` API use `BottomSheetRef`:
+
+```tsx
+import { useRef } from 'react'
+import { BottomSheet, BottomSheetRef } from 'react-spring-bottom-sheet'
+
+export default function Example() {
+  const sheetRef = useRef<BottomSheetRef>()
+  return (
+    <BottomSheet open ref={sheetRef}>
+      <button
+        onClick={() => {
+          // Full typing for the arguments available in snapTo, yay!!
+          sheetRef.current.snapTo(({ maxHeight }) => maxHeight)
+        }}
+      >
+        Expand to full height
+      </button>
+    </BottomSheet>
+  )
+}
+```
+
+## Customizing the CSS
+
+### Using CSS Custom Properties
+
+These are all the variables available to customize the look and feel when using the [provided](/src/style.css) CSS.
+
+```css
+:root {
+  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+  --rsbs-bg: #fff;
+  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
+  --rsbs-max-w: auto;
+  --rsbs-ml: env(safe-area-inset-left);
+  --rsbs-mr: env(safe-area-inset-right);
+  --rsbs-overlay-rounded: 16px;
+}
+```
+
+### Custom CSS
+
+It's recommended that you copy from [style.css](/src/style.css) into your own project, and add this to your `postcss.config.js` setup (`npm i postcss-custom-properties-fallback`):
+
+```js
+module.exports = {
+  plugins: {
+    // Ensures the default variables are available
+    'postcss-custom-properties-fallback': {
+      importFrom: require.resolve('react-spring-bottom-sheet/defaults.json'),
+    },
+  },
+}
+```
+
+
 # [Demos](https://react-spring-bottom-sheet.cocody.dev/)
 
 ## [Basic](https://react-spring-bottom-sheet.cocody.dev/fixtures/simple)
@@ -40,7 +122,6 @@ If you provide either a `header` or `footer` prop you'll enable the special beha
 
 In most cases you use a bottom sheet the same way you do with a dialog: you want it to overlay the page and block out distractions. But there are times when you want a bottom sheet but without it taking all the attention and overlaying the entire page. Providing `blocking={false}` helps this use case. By doing so you disable a couple of behaviors that are there for accessibility (focus-locking and more) that prevents a screen reader or a keyboard user from accidentally leaving the bottom sheet.
 
-# [Get started](/GET_STARTED.md)
 
 # API