From e6180e3b1818a0b7d76c31c58a8f359e6994812b Mon Sep 17 00:00:00 2001
From: Abdelrahman Abdelhafez <abdelrahman@maged.rocks>
Date: Mon, 11 Jan 2021 01:11:47 +0100
Subject: [PATCH 1/3] Format README code snippets
---
README.md | 94 +++++++++++++++++++++++++++----------------------------
1 file changed, 47 insertions(+), 47 deletions(-)
diff --git a/README.md b/README.md
index cf38a8e..573b534 100644
--- a/README.md
+++ b/README.md
@@ -30,39 +30,39 @@ npm install --save react-planet
import { Planet } from 'react-planet';
export function MyPlanet() {
- return (
- <Planet
- centerContent={
- <div
- style={{
- height: 100,
- width: 100,
- borderRadius: '50%',
- backgroundColor: '#1da8a4',
- }}
- />
- }
- open
- autoClose
- >
- <div
- style={{
- height: 70,
- width: 70,
- borderRadius: '50%',
- backgroundColor: '#9257ad',
- }}
- />
- <div
- style={{
- height: 70,
- width: 70,
- borderRadius: '50%',
- backgroundColor: '#9257ad',
- }}
- />
- </Planet>
- );
+ return (
+ <Planet
+ centerContent={
+ <div
+ style={{
+ height: 100,
+ width: 100,
+ borderRadius: '50%',
+ backgroundColor: '#1da8a4',
+ }}
+ />
+ }
+ open
+ autoClose
+ >
+ <div
+ style={{
+ height: 70,
+ width: 70,
+ borderRadius: '50%',
+ backgroundColor: '#9257ad',
+ }}
+ />
+ <div
+ style={{
+ height: 70,
+ width: 70,
+ borderRadius: '50%',
+ backgroundColor: '#9257ad',
+ }}
+ />
+ </Planet>
+ );
}
```
@@ -71,11 +71,12 @@ export function MyPlanet() {
<img src="doc/example2.png" width="40%">
```jsx
-<Planet centerContent={div style={...yourStlye}/>}
- open
- orbitRadius={120}
- rotation={30}
- ...
+<Planet
+ centerContent={<div style={yourStyle} />}
+ open
+ orbitRadius={120}
+ rotation={30}
+ ...
>
```
@@ -106,8 +107,8 @@ export function MyPlanet() {
```jsx
<Planet
- // set one of the orientations
- satelliteOrientation="INSIDE"
+ // set one of the orientations
+ satelliteOrientation="INSIDE"
```
@@ -117,9 +118,9 @@ export function MyPlanet() {
```jsx
<Planet
- dragablePlanet
- dragRadiusPlanet={20}
- bounce
+ dragablePlanet
+ dragRadiusPlanet={20}
+ bounce
```
## Planetception
@@ -162,10 +163,9 @@ Code: [/src/stories/Planetception.stories.tsx](/src/stories/Planetception.storie
```jsx
<Planet
- mass={4}
- tension={500}
- friction={19}
-
+ mass={4}
+ tension={500}
+ friction={19}
```
<br/>
From 31904dbc6660af8f57f808e3d963e7aa83a98386 Mon Sep 17 00:00:00 2001
From: Abdelrahman Abdelhafez <abdelrahman@maged.rocks>
Date: Mon, 11 Jan 2021 01:16:49 +0100
Subject: [PATCH 2/3] Format README code snippets
---
README.md | 77 +++++++++++++++++++++++++++----------------------------
1 file changed, 38 insertions(+), 39 deletions(-)
diff --git a/README.md b/README.md
index 573b534..34767be 100644
--- a/README.md
+++ b/README.md
@@ -72,9 +72,9 @@ export function MyPlanet() {
```jsx
<Planet
- centerContent={<div style={yourStyle} />}
- open
- orbitRadius={120}
+ centerContent={<div style={yourStyle} />}
+ open
+ orbitRadius={120}
rotation={30}
...
>
@@ -86,18 +86,18 @@ export function MyPlanet() {
```jsx
<Planet
- orbitStyle={(defaultStyle) => ({
- ...defaultStyle,
- borderWidth: 4,
- borderStyle: 'dashed',
- borderColor: '#6f03fc',
- })}
- centerContent={<div className={classes.planetSmall} />}
- open
+ orbitStyle={(defaultStyle) => ({
+ ...defaultStyle,
+ borderWidth: 4,
+ borderStyle: 'dashed',
+ borderColor: '#6f03fc',
+ })}
+ centerContent={<div className={classes.planetSmall} />}
+ open
>
- <div className={classes.satellite1} />
- <div className={classes.satellite2} />
- <div className={classes.satellite3} />
+ <div className={classes.satellite1} />
+ <div className={classes.satellite2} />
+ <div className={classes.satellite3} />
</Planet>
```
@@ -107,9 +107,8 @@ export function MyPlanet() {
```jsx
<Planet
- // set one of the orientations
- satelliteOrientation="INSIDE"
-
+ // set one of the orientations
+ satelliteOrientation="INSIDE"
```
## Bring it to life
@@ -118,9 +117,9 @@ export function MyPlanet() {
```jsx
<Planet
- dragablePlanet
- dragRadiusPlanet={20}
- bounce
+ dragablePlanet
+ dragRadiusPlanet={20}
+ bounce
```
## Planetception
@@ -137,23 +136,23 @@ Code: [/src/stories/Planetception.stories.tsx](/src/stories/Planetception.storie
```jsx
<Planet
- centerContent={<YourButton0 />}
- hideOrbit
- autoClose
- orbitRadius={60}
- bounceOnClose
- rotation={105}
- // the bounce direction is minimal visible
- // but on close it seems the button wobbling a bit to the bottom
- bounceDirection="BOTTOM"
+ centerContent={<YourButton0 />}
+ hideOrbit
+ autoClose
+ orbitRadius={60}
+ bounceOnClose
+ rotation={105}
+ // the bounce direction is minimal visible
+ // but on close it seems the button wobbling a bit to the bottom
+ bounceDirection="BOTTOM"
>
- <YourButton1 />
- <YourButton2 />
- <YourButton3 />
- <div />
- <div />
- <div />
- <div />
+ <YourButton1 />
+ <YourButton2 />
+ <YourButton3 />
+ <div />
+ <div />
+ <div />
+ <div />
</Planet>
```
@@ -163,9 +162,9 @@ Code: [/src/stories/Planetception.stories.tsx](/src/stories/Planetception.storie
```jsx
<Planet
- mass={4}
- tension={500}
- friction={19}
+ mass={4}
+ tension={500}
+ friction={19}
```
<br/>
From 4044bb27cbdc1a430edbbf74632ba016a7ef453c Mon Sep 17 00:00:00 2001
From: Abdelrahman Abdelhafez <abdelrahman@maged.rocks>
Date: Mon, 11 Jan 2021 01:18:08 +0100
Subject: [PATCH 3/3] Format README code snippets
---
README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 34767be..ef9c8f5 100644
--- a/README.md
+++ b/README.md
@@ -75,8 +75,8 @@ export function MyPlanet() {
centerContent={<div style={yourStyle} />}
open
orbitRadius={120}
- rotation={30}
- ...
+ rotation={30}
+ ...
>
```