From 15ec90f0cec554bedf27592512ef9392223fb4fa Mon Sep 17 00:00:00 2001 From: Pete Correia Date: Tue, 19 Feb 2019 10:20:09 +0000 Subject: [PATCH] Add CodeSandbox examples --- README.md | 28 +++----- docs/pages/examples.tsx | 138 +++++++++++++++++++++++++++++++++++----- docs/pages/hooks.tsx | 80 +++++++++++++++-------- docs/pages/index.tsx | 40 ++++++------ 4 files changed, 203 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index 22f03df..8d05ec5 100644 --- a/README.md +++ b/README.md @@ -14,29 +14,13 @@ React components for easily composing a circular range input [github-release]: https://flat.badgen.net/github/release/petecorreia/react-circular-input ```sh -npm i react-circular-input +npm i react-circular-input ``` Screenshot ## Example -You can use the default circular input: - -```tsx -import { CircularInput } from 'react-circular-input' - -export default () => { - const [value, setValue] = useState(0.25) - - return ( - - ) -} -``` - -Or **compose it**: - ```tsx import { CircularInput, @@ -60,15 +44,19 @@ export default () => { There's a lot more you can do with the library. From a simple gauge to a fully custom and animated circular input range. +Play around with **[examples at CodeSandbox](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1)**: + +[![Edit react-circular-input](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ypwq61rnxz?hidenavigation=1) + A declarative and composable approach means we have a lot of flexibility, check out the documentation for how to go further! ## Documentation Full documentation at **[react-circular-input.now.sh](https://react-circular-input.now.sh)**. -* [Examples](https://react-circular-input.now.sh/examples) -* [Components](https://react-circular-input.now.sh/components) -* [Hooks](https://react-circular-input.now.sh/hooks) +- [Examples](https://react-circular-input.now.sh/examples) +- [Components](https://react-circular-input.now.sh/components) +- [Hooks](https://react-circular-input.now.sh/hooks) Enjoy! 🎉 diff --git a/docs/pages/examples.tsx b/docs/pages/examples.tsx index 2f277c8..47458c4 100644 --- a/docs/pages/examples.tsx +++ b/docs/pages/examples.tsx @@ -7,9 +7,9 @@ import { CircularTrack, CircularProgress, CircularThumb, + useCircularInputContext, } from '../../src' import styled from 'styled-components' -import { animated } from 'react-spring/renderprops-universal' const FullFeaturedExample = () => { const [value, setValue] = useState(0.25) @@ -33,11 +33,11 @@ const ProgressExample = () => { }, []) return ( - + {props => ( - - + + )} @@ -83,6 +83,47 @@ const AnimatedExample = () => { ) } +const CustomComponent = () => { + const { getPointFromValue, value } = useCircularInputContext() + const { x, y } = getPointFromValue() + + return ( + + {Math.round(value * 100)} + + ) +} + +const CustomExample = () => { + const [value, setValue] = useState(0.25) + + return ( + + {props => ( + + + + + + )} + + ) +} + export default () => ( <> @@ -90,6 +131,26 @@ export default () => ( here are a few examples that showcase it. +

+ Play around with the{' '} + + examples at CodeSandbox + +

+ + + Edit react-circular-input + +

@@ -163,6 +224,7 @@ export default () => ( {/* CSS-in-JS */} @@ -178,27 +240,49 @@ export default () => ( `} /> -

Readonly

+

Custom Component

- ⚠️ Omitting the onChange prop makes it readonly. + Using the provided{' '} + + + Hooks + + {' '} + you can create your own components! 🤩

- - - - - + - - - - + const CustomComponent = () => { + const { getPointFromValue, value } = useCircularInputContext() + const { x, y } = getPointFromValue() + + return ( + + {Math.round(value * 100)} + + ) + } + + const CustomComponentExample = () => { + const [value, setValue] = useState(0.25) + + return ( + + + + + {/* Add any component and use the provided hooks! */} + + + + ) + } `} /> @@ -210,6 +294,28 @@ export default () => ( + + + + + `} + /> + +

Readonly

+ +

+ Omitting the onChange prop makes it readonly. +

+ + + + + + + + diff --git a/docs/pages/hooks.tsx b/docs/pages/hooks.tsx index 185c75b..791797e 100644 --- a/docs/pages/hooks.tsx +++ b/docs/pages/hooks.tsx @@ -13,60 +13,86 @@ export default () => ( CircularInput.

-

useCircularDrag

+

useCircularInputContext

- Makes a component "draggable" and fires the CircularThumb{' '} - onChange on click and drag with the nearest value. + Gives you access to the same context used by the components so you can + create custom ones. 🙂

- Adds/removes event listeners as needed so you don't have to worry about - that complexity. + You get access to key computed values and utility functions that should be + enough to build any custom component.

{ + const { getPointFromValue, value } = useCircularInputContext() + const { x, y } = getPointFromValue() + + return ( + + {Math.round(value * 100)} + + ) + } `} /> +

useCircularDrag

+

- CircularThumb uses this hook:{' '} - - View source - + Adds event listeners to an element ref to fire the{' '} + CircularThumb onChange on click and drag with + the nearest value.

-

useCircularInputContext

-

- Gives you access to the same context used by the components so you can - create custom ones. 🙂 + Adds/removes listeners as needed so you don't have to worry about that + complexity.

- You get access to key computed values and utility functions that should be - enough to build any custom component. + CircularThumb uses this hook:{' '} + + View source +

{ + const { getPointFromValue } = useCircularInputContext() + const { x, y } = getPointFromValue() + + const ref = useRef(null) + useCircularDrag(ref) + + return + } `} /> diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 856ec12..50841bd 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -28,26 +28,6 @@ export default () => (

Example

-

You can use the default circular input:

- - { - const [value, setValue] = useState(0.25) - - return ( - - ) - } - `} - /> - -

- Or compose it: -

- ( fully custom and animated circular input range.

+

+ Play around with the{' '} + + examples at CodeSandbox + +

+ + + Edit react-circular-input + +

A declarative and composable approach means we have a lot of flexibility, check out the other pages for how to go further!