(
72 |
73 | {JSON.stringify(
74 | {
75 | acceleration,
76 | accelerationIncludingGravity,
77 | rotationRate,
78 | interval,
79 | },
80 | null,
81 | 2
82 | )}
83 |
84 | )}
85 | />
86 | );
87 |
88 | export default Example;
89 | ```
90 |
91 | ### `withDeviceMotion()`
92 |
93 | ```javascript
94 | import { withDeviceMotion } from 'react-fns';
95 |
96 | const Inner = ({
97 | acceleration,
98 | accelerationIncludingGravity,
99 | rotationRate,
100 | interval,
101 | }) => (
102 |
103 | {JSON.stringify(
104 | { acceleration, accelerationIncludingGravity, rotationRate, interval },
105 | null,
106 | 2
107 | )}
108 |
109 | );
110 |
111 | export default withDeviceMotion(Inner);
112 | ```
113 |
114 | ## DeviceOrientation
115 |
116 | Detect and retrieve current device orientation.
117 |
118 | ### DeviceOrientation props
119 |
120 | * `alpha: number`: value represents the motion of the device around the z axis,
121 | represented in degrees with values ranging from 0 to 360.
122 | * `beta: number`: value represents the motion of the device around the x axis,
123 | represented in degrees with values ranging from -180 to 180. This represents a
124 | front to back motion of the device.
125 | * `gamma: number`: value represents the motion of the device around the y axis,
126 | represented in degrees with values ranging from -90 to 90. This represents a
127 | left to right motion of the device.
128 |
129 | For more information about the DeviceOrientation API,
130 | [check out the MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)
131 |
132 | ### ``
133 |
134 | ```javascript
135 | import { DeviceOrientation } from 'react-fns';
136 |
137 | const Example = () => (
138 | (
140 | {JSON.stringify({ alpha, beta, gamma, absolute }, null, 2)}
141 | )}
142 | />
143 | );
144 |
145 | export default Example;
146 | ```
147 |
148 | ### `withDeviceOrientation()`
149 |
150 | ```javascript
151 | import { withDeviceOrientation } from 'react-fns';
152 |
153 | const Inner = ({ alpha, beta, gamma, absolute }) => (
154 | {JSON.stringify({ alpha, beta, gamma, absolute }, null, 2)}
155 | );
156 |
157 | export default withDeviceOrientation(Inner);
158 | ```
159 |
160 | ## Network
161 |
162 | Retrieve network access from the browser.
163 |
164 | ### Network props
165 |
166 | * `online: boolean`: `true` if the browser has network access. `false`
167 | otherwise.
168 | * `offlineAt?: Date`: Date when network connection was lost.
169 |
170 | ### ``
171 |
172 | ```javascript
173 | import { Network } from 'react-fns';
174 |
175 | const Example = () => (
176 | (
178 |
179 | {online ? 'Online!' : 'Offline'}
180 | {offlineAt && `Last connected ${offlineAt.toISOString()}`}
181 |
182 | )}
183 | />
184 | );
185 |
186 | export default Example;
187 | ```
188 |
189 | ### `withNetwork()`
190 |
191 | ```javascript
192 | import { withNetwork } from 'react-fns';
193 |
194 | const Inner = ({ online, offlineAt }) => (
195 |
196 | {online ? 'Online!' : 'Offline'}
197 | {offlineAt && `Last connected ${offlineAt.toISOString()}`}
198 |
199 | );
200 |
201 | export default withNetwork(Inner);
202 | ```
203 |
204 | ## GeoPosition
205 |
206 | Retrieve Geo position from the browser.
207 |
208 | ### GeoPosition props
209 |
210 | * `isLoading: boolean`: `true` request status
211 | * `coords?: Position`: Geoposition object. Has keys of `latitude` and
212 | `longitude`
213 | * `error?: PositionError`: GeoPosition error. See MDN for shape.
214 |
215 | ### ``
216 |
217 | ```javascript
218 | import { GeoPosition } from 'react-fns';
219 |
220 | const Example = () => (
221 | (
223 | {coords && `${coords.longitude},${coords.latitude}`}
224 | )}
225 | />
226 | );
227 |
228 | export default Example;
229 | ```
230 |
231 | ### `withGeoPosition()`
232 |
233 | ```javascript
234 | import { withGeoPosition } from 'react-fns';
235 |
236 | const Inner = ({ isLoading, coords, error }) => (
237 | {coords && `${cords.longitude}$,{coords.latitude}`}
238 | );
239 |
240 | export default withGeoPosition(Inner);
241 | ```
242 |
243 | ## Media
244 |
245 | Retrieve media query (i.e. `window.matchMedia().matches`) from the browser. Note
246 | this component is taken from @mjackson's awesome
247 | [react-media](https://github.com/reacttraining/react-media)
248 |
249 | ### Media props
250 |
251 | * `query: string`: A media query string
252 |
253 | ### Media render props
254 |
255 | * `matches: boolean`: `true` if browser matches the media query
256 |
257 | ### ``
258 |
259 | ```javascript
260 | import { Media } from 'react-fns';
261 |
262 | const Example = () => (
263 | {match ? 'mobile' : 'desktop'}
}
266 | />
267 | );
268 |
269 | export default Example;
270 | ```
271 |
272 | ### `withMedia()`
273 |
274 | Not implemented
275 |
276 | ## Scroll
277 |
278 | ### Scroll props
279 |
280 | * `x`: Horizontal scroll in pixels (`window.pageXOffset`)
281 | * `y`: Vertical scroll in pixels (`window.pageYOffset`)
282 |
283 | ### ``
284 |
285 | Returns `window.pageYOffset` and `window.pageXOffset`.
286 |
287 | ```javascript
288 | import { Scroll } from 'react-fns';
289 |
290 | const Example = () => (
291 | (
293 |
294 | Scroll: {x}, {y}
295 |
296 | )}
297 | />
298 | );
299 |
300 | export default Example;
301 | ```
302 |
303 | ### `withScroll()`
304 |
305 | Injects `window.pageYOffset` and `window.pageXOffset` as `x` and `y` props.
306 |
307 | ```javascript
308 | import { withScroll } from 'react-fns';
309 |
310 | const Inner = ({ x, y }) => (
311 |
312 | Scroll Position: {x}, {y}
313 |
314 | );
315 |
316 | export default withScroll(Inner);
317 | ```
318 |
319 | ## WindowSize
320 |
321 | ### WindowSize props
322 |
323 | * `width`: Width of browser viewport (`window.innerWidth`)
324 | * `height`: Height of browser viewport (`window.innerHeight`)
325 |
326 | ### ``
327 |
328 | Returns `window.innerWidth` and `window.innerHeight`.
329 |
330 | ```javascript
331 | import { WindowSize } from 'react-fns';
332 |
333 | const Example = () => (
334 | (
336 |
337 | Window size: {width}, {height}
338 |
339 | )}
340 | />
341 | );
342 |
343 | export default Example;
344 | ```
345 |
346 | ### `withWindowSize()`
347 |
348 | Injects `window.innerWidth` and `window.innerHeight` as `width` and `height`
349 | props.
350 |
351 | ```javascript
352 | import { withWindowSize } from 'react-fns';
353 |
354 | const Inner = ({ width, height }) => (
355 |
356 | Window size: {width}, {height}
357 |
358 | );
359 |
360 | export default withWindowSize(Inner);
361 | ```
362 |
363 | ## Locales
364 |
365 | ### Locales props
366 |
367 | * `locales`: The current browser locales (`navigator.languages` or
368 | `navigator.language`)
369 |
370 | ### ``
371 |
372 | Returns canonical `navigator.languages` or `navigator.language` as `locales`.
373 |
374 | ```javascript
375 | import { Locales } from 'react-fns';
376 |
377 | const Example = () => (
378 | (
380 |
381 | Right now the time and date is{' '}
382 | {new Intl.DateTimeFormat(locales).format(new Date())}
383 |
384 | )}
385 | />
386 | );
387 |
388 | export default Example;
389 | ```
390 |
391 | ### `withLocales()`
392 |
393 | Injects canonical `navigator.languages` or `navigator.language` as `locales`
394 | prop.
395 |
396 | ```javascript
397 | import { withLocales } from 'react-fns'
398 |
399 | const Inner = ({ locales }) => Right now the time and date is {new Intl.DateTimeFormat(locales).format(new
400 |
401 | export default withLocales(Inner)
402 | ```
403 |
404 | ## Utility Components
405 |
406 | ### ``
407 |
408 | Renders ``
409 |
410 | #### Mailto props
411 |
412 | * `email: string`: Recipient's email address
413 | * `subject?: string`: Subject of the email
414 | * `cc?: string | string[]`: Email address or an array of email addresses to Cc
415 | * `bcc?: string | string[]`: Email address or an array of email addresses to Bcc
416 | (blind copy)
417 | * `body?: string`: Body copy of the email
418 |
419 | ### ``
420 |
421 | Renders ``
422 |
423 | #### Sms props
424 |
425 | * `phone: string`: Phone number
426 | * `body?: string`: Body copy of the text message
427 |
--------------------------------------------------------------------------------
/docs/how-it-works.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: how-it-works
3 | title: How it works
4 | ---
5 |
6 | When possible, each component (e.g. ``) in react-fns also exports a
7 | higher-order component with identical functionality (e.g. `withThing()`.
8 |
9 | Every render prop'd component shares the same three rendering methods:
10 |
11 | * ` }>`
12 | * ``
13 | * `{props => }`
14 |
15 | All HoC's will pass through any and all additional props through to the inner
16 | component in addition to the props that they inject.
17 |
--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: installation
3 | title: Installation
4 | ---
5 |
6 | You can install react-fns with [NPM](https://npmjs.com),
7 | [Yarn](https://yarnpkg.com), or good ol' `
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
63 |
64 | 
