open-index/open-npm huggingface dataset:
npm package: @patina/std
Description: Type-safe nothing-handling and error-handling library
Author: bkiac
Latest version: 0.1.1
Deprecated: Please use @patina/core instead

Similar libraries

-   [@badrap/result](https://github.com/badrap/result)
-   [effect](https://github.com/Effect-TS/effect)
-   [neverthrow](https://github.com/supermacro/neverthrow)
-   [option-t](https://github.com/option-t/option-t)
-   [oxide.ts](https://github.com/traverse1984/oxide.ts)
-   [true-myth](https://github.com/true-myth/true-myth)
-   [ts-results](https://github.com/vultix/ts-results)

Other useful libraries

-   [ts-pattern](https://github.com/gvergnaud/ts-pattern)

## Testing

Adding an iterator to the Result class has introduced behavior that affects how testing libraries handle deep comparisons of instances of this class.
This is interfering with how deep equality checks are performed, as the tests rely on iterating over object properties or their prototypes to determine equality.

This means asserting equality between any two instances of the Result class will always pass, even if the instances are not equal:

```ts
expect(Ok()).toEqual(Ok(1));
expect(Err()).toEqual(Err(1));
expect(Ok()).toEqual(Err());
```

To properly test equality between instances of the Result class, you can unwrap the value and compare it directly:

```ts
expect(Ok().unwrap()).toEqual(Ok(1).unwrap()); // Now fails as expected
```
npm package: @patio23/shared-components
Description: shared-components React component
Latest version: 1.1.1

# shared-components

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

Describe shared-components here.

[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
npm package: @patlamontagne/react-dot
Description: Render discrete react components from your backend.
Author: Patrick Lamontagne
Latest version: 0.1.2

# React-dot

Dots are separated backend driven React components.

What does it mean? It means you can add multiple single react components on your front-end and send them initial props right from your backend.

`react-dot` is intended for projects where you can't leverage inertiajs' SPA approach, or for existing server-side rendered projects where you just need to easily add some react interactivity without resorting to rebuilding the whole thing in react.

### Backend adapters

While `react-dot` only needs html to work, it is intended to be used along a backend adapter:

https://github.com/patlamontagne/react-dot-php

## Installing

```sh
npm i @patlamontagne/react-dot
```

## Usage with React 18

```jsx
import { createDots } from "@patlamontagne/react-dot";
import { createRoot } from "react-dom/client";

createDots({
    resolve: (name) => require(`./components/${name}.jsx`),
    setup: ({ el, Dot, props }) => {
        createRoot(el).render(<Dot {...props} />);
    },
});
```

## Code splitting (optional)

Add `@babel/plugin-syntax-dynamic-import` to your project:

```sh
npm i @babel/plugin-syntax-dynamic-import
```

Add a `.babelrc` file at the project root:
```json
{
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}
```

Use `import` instead of `require` :

```jsx
createDots({
    resolve: (name) => import(`./components/${name}.jsx`),
    /*...*/
});
```
npm package: @patlux/react-pull-to-refresh
Description: A React component for pull to refresh on the web.
Latest version: 1.1.2

# react-pull-to-refresh

`npm install react-pull-to-refresh -S`

A pull to refresh component for the web.

Based on Andy Peatling's [Pull to Refresh for the Web](https://github.com/apeatling/web-pull-to-refresh)

![Demo GIF](https://github.com/bryaneaton13/react-pull-to-refresh/blob/master/docs/demo.gif)

## Usage

Your refresh handler function takes in `resolve` and `reject` to tell the PullToRefresh component when it's finished.

```javascript
handleRefresh(resolve, reject) {
  // do some async code here
  if (success) {
    resolve();
  } else {
    reject();
  }
}

```

Where you want to render the component:

```xml
<ReactPullToRefresh
  onRefresh={this.handleRefresh}
  className="your-own-class-if-you-want"
  style={{
    textAlign: 'center'
  }}>
  <h3>Pull down to refresh</h3>
  <div>{items}</div>
  <div>etc.</div>
</ReactPullToRefresh>
```



## CSS
Use the CSS from the example or from [here](https://github.com/apeatling/web-pull-to-refresh) as a starting point.


## All props

PropTypes

- **onRefresh**: `PropTypes.func.isRequired`
- **icon**: `PropTypes.element`
  - *default:*
  ```html
  <span className="genericon genericon-next"></span>
  ```
- **loading**: `PropTypes.element`
  - *default:*
  ```html
  <div className="loading">
    <span className="loading-ptr-1"></span>
    <span className="loading-ptr-2"></span>
    <span className="loading-ptr-3"></span>
  </div>
  ```
- **disabled**: `PropTypes.bool`
- **className**: `PropTypes.string`
- **style**: `PropTypes.object`
- **distanceToRefresh**: `PropTypes.number`
  - *default*: `70`
- **resistance**: `PropTypes.number`
  - *default*: `2.5`
- **hammerOptions**: `PropTypes.object`

## Thanks
[Andy Peatling](http://apeatling.com/)
npm package: @patoi/retry
Description: Retry an async function
Latest version: 1.0.3

# retry

Retry fetch with zero dependency.

## Usage

```js
const Retry = retry()
const response = await Retry(async () => fetch('https://localhost:8080/api/200'))
```

## Install

```
pnpm add -D @patoi/retry
npm add -D @patoi/retry
yarn add -D @patoi/retry
```

## Config

```typescript
type Config = { retries?: number; sleepTime?: number; debug?: boolean }
```

```js
const Retry = retry({ retries: 2, sleepTime: 500, debug: true })
const response = await Retry(async () => fetch('https://localhost:8080/api/200'))
```

Defaults:

- retries: 3
- sleepTime: 1000 ms
- debug: `false`

## Description

Retry request if response is an Error (Timeout, Network, etc. - except `AbortError`) or `Response.status` is 500 or greater.

Handles `AbortError`: if request aborted, no more retries, throws `AbortError` immediately.

See tests for more: [examples](test.ts)

Sleep time **increases the delay** between request: when a request is completed, the delayed start beginning, for example (sleepTime is 1s):

- First request starts at 0s (immediately), delay is 0s
- Second at 1s (delay is 1s)
- Third at 3s (delay is 2s)
- Fourth at 6s (delay is 3s)
- Fifth at 10s (delay is 4s)
  and so on..
npm package: @patoi/tw-zen-plugin
Description: TailwindCSS Zen intersection animation plugin
Author: István Pató https://twitter.com/@patoistvan
Latest version: 1.1.1

# Tailwind Zen intersection animation plugin

Create beautiful intersection animation with TW Zen.

It can be used with frameworks - SvelteKit, Next.js, etc. - and with simple HTML pages.

- Automatically suspends the animation, when element is not intersected, saves energy.
- Turns off animations in reduced motion mode.
- Supports responsive design.
- There is no third-party dependency.
- Free and Open Source.

Check out the https://tw-zen-site.vercel.app/ page.

## Configuration

Before using it, you need to add to `tailwind.config.js` the plugin and the safelist:

```
plugins: [require('tw-zen-plugin')],
safelist: ['zen--suspend', 'zen--off', 'zen--reduced']
```

## Features

Add classes to block-level elements.
When block-level element intersected with view, animation has triggered.

**Note** that padding increases the size of the block-level element, so the content may not be visible on the screen yet, but the animation will begin.

- `zen-fade` fade-in content
- `zen-pop-up` content moves up with fade-in
- `zen-from-left` content moves from left to right with fade-in
- `zen-from-right` content moves from right to left with fade-in
- `zen-spin-forever` constantly rotating content

For example:

```html
<!-- pure HTML, and Svelte -->
<div class="zen-once zen-pop-up">...</div>
<!-- react -->
<Image className="zen-pause zen-spin-forever" />
```

All animations will repeat constantly unless you add `zen-once`, for example: `zen-once zen-pop-up` The use of `zen-once` is recommended.

The `zen-spin-forever` rotates the content forever, even when it is not on the screen. If you want to suspend the rotation (saving energy), then add `zen-pause` class, `zen-pause zen-spin-forever`

**Breakpoint handling (except `zen-spin-forever`):**

- Turn off animation with `max-lg:zen--off`, it will not be animated below `lg` size.
- Turn off animation with `lg:zen--off`, it will not be animated above `lg` size.

In case of `zen-spin-forever` (or `zen-custom-animation`, see later) just write `max-lg:zen-spin-forever` or `lg:zen-spin-forever`

```html
<div class="zen-once zen-pop-up max-lg:zen--off">...</div>
```

**Tailwind way to customize:**

```html
  <!-- delaying animation with 5s -->
  <div class="zen-fade zen-once delay-[5000ms]">...</div>
  <!-- animation's duration is 2s -->
  <div class="zen-fade zen-once duration-[2000ms]">...</div>
```

**To extend animations,** start your style with `zen-` in your base css file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* fast rotating animation */
  .zen-custom-animation {
    @apply animate-[spin_2s_linear_infinite]
  }
}
```

## Starting intersection plugin

**Don't forget to start the intersection handler in the code if you're using a framework! In plain HTML codes it starts automatically.**

There are examples for using with frameworks.

- Next.js example: https://github.com/patoi/tw-zen-example-nextjs
- SvelteKit example: https://github.com/patoi/tw-zen-example-sveltekit
npm package: @patomation/clone-deep
Description: Recursive deep clone algorithm for object and arrays
Author: Patrick Kelly
Latest version: 0.0.1

# Clone Deep

Another deep clone algorithm for object and arrays

![flavorite](https://raw.githubusercontent.com/patomation/vanilla-starter/master/public/favicon.ico)

### Install

```
npm i @patomation/clone-deep
```

## Usage

```javascript
import {cloneDeep} from '@patomation/clone-deep'

const objA = {foo: 'bar'}
const objB = cloneDeep(objA)

const objB.foo = 'baz'

// Result
objA.foo
// 'bar'
objA.foo
// 'baz'

// NOTE objA will not be changed when making mutations to objB
```

## TypeScript usage

This module supports generic types

```typescript
interface MyObject = {
  foo: string
  bar: string
}

const myObject: MyObject = {foo: 'biz', bar: 'buz'}

const myClonedObject = cloneDeep<MyObject>(myObject)
```

### Test

```
npm run test
```

supports naming convention: moduleName.test.ts
Check out [ava](https://github.com/avajs/ava)
npm package: @patomation/create-react-app
Description: A simple react app template that is already ejected with webpack and no crap
Author: Patrick Kelly
Latest version: 2.0.3

# React Boilerplate

keep it simple stupid

## USAGE:

Install the deps the first time

```sh
npm i
```

Run the Dev Server

```sh
npm start
```

## Build:

```sh
npm run build
```

## Testing

```sh
npm test
```

## Docker

```sh
docker build -t react-boilerplate-image .
docker run -dit --rm --name react-boilerplate-app -p 8080:80 react-boilerplate-image
```
npm package: @patomation/nps
Description: TypeScript NPM Package Starter
Author: Patrick Kelly
Latest version: 1.0.2

# NPM Package Starter

```
NNNNNNNN        NNNNNNNN PPPPPPPPPPPPPPPPP       SSSSSSSSSSSSSSS
N:::::::N       N::::::N P::::::::::::::::P    SS:::::::::::::::S
N::::::::N      N::::::N P::::::PPPPPP:::::P  S:::::SSSSSS::::::S
N:::::::::N     N::::::N PP:::::P     P:::::P S:::::S     SSSSSSS
N::::::::::N    N::::::N   P::::P     P:::::P S:::::S
N:::::::::::N   N::::::N   P::::P     P:::::P S:::::S
N:::::::N::::N  N::::::N   P::::PPPPPP:::::P   S::::SSSS
N::::::N N::::N N::::::N   P:::::::::::::PP     SS::::::SSSSS
N::::::N  N::::N:::::::N   P::::PPPPPPPPP         SSS::::::::SS
N::::::N   N:::::::::::N   P::::P                    SSSSSS::::S
N::::::N    N::::::::::N   P::::P                         S:::::S
N::::::N     N:::::::::N   P::::P                         S:::::S
N::::::N      N::::::::N PP::::::PP           SSSSSSS     S:::::S
N::::::N       N:::::::N P::::::::P           S::::::SSSSSS:::::S
N::::::N        N::::::N P::::::::P           S:::::::::::::::SS
NODE___N         N_____N PACKAGE_P            STARTER_________S
```

The goal here is to have a vanilla project starter that includes TypeScript. In addition it has commit lint and ava for testing. So not so vanilla. More of a minimal preset. You get to chose your preferred front end framework. Enjoy making things.

### Features

- TypeScript
- [ava](https://github.com/avajs/ava) test framework
- nyc test coverage reporter
- standard-version
- commit-lint
- husky
- prettier
- pretty-quick staged formatting
- [clunk 4kb cli arg parser](https://www.npmjs.com/package/clunk)

![flavorite](https://raw.githubusercontent.com/patomation/vanilla-starter/master/public/favicon.ico)

# Install

```
npm i -G @patomation/nps
```

# Starting a new project

```
nps new my-new-ts-npm-package
cd my-new-ts-npm-package
npm i
```

# Updating an existing project

```
cd my-new-ts-npm-package
nps update
npm i
```

# Development

## Install

```
npm install
```

## Test

```
npm run test
# or
npm run watch:test
```

## Available NPM Scripts:

`npm run ...`

| Script          | Notes                                   |
| --------------- | --------------------------------------- |
|                 |                                         |
| compile:tests   |                                         |
| compile:package |                                         |
| compile         | both test and package                   |
| build           | transpile TyScript to JS /build dir     |
| unit            | run ava on /build                       |
| unit:coverage   | run coverage on /build                  |
| test            | compile /build and run unit tests       |
| coverage        | compile /build and test coverage report |
| watch:compile   | watch for change in src                 |
| watch:test      | run tests when src changes              |
| release         | trigger standard-version                |
| publish         | hook to push tags on npm publish        |
| prepare         | hook to install huksy on npm i          |
| prettier        | format all files with prettier          |
npm package: @patomation/omit-deep
Description: A utility to clone an object without certain keys
Author: Patrick Kelly
Latest version: 1.0.2

# Omit Deep
A utility to clone an object without certain keys
This is great to lazily send data back to a graphql server without having to worry about the __typename having to be in your input.

# Usage
```javascript
import { omitDeep } from '@patomation/omit-deep'

const before = {
  __typename: 'remove',
  keep: 'me',
  deep: {
    __typename: 'remove',
    keep: 'this one'
  }
}
// Remove __typename key
const after = omitDeep(before, '__typename')
// After = 
// {
//   keep: 'me',
//   deep: {
//     keep: 'this one'
//   }
// }
```
Only the key you specify is removed.


## Install
```
npm i @patomation/omit-deep
```

## Test
```
npm run test
```
supports naming convention: moduleName.test.ts
Check out [ava](https://github.com/avajs/ava)
npm package: @patomation/query-param
Description: A module to get query string parameters from the window object 
Author: Patrick Kelly
Latest version: 1.4.0

# Query Param Module

Gets query string parameters from window location substring.

## Installation
```
yarn add @patomation/query-param
```
```
npm install @patomation/query-param --save
```

## Usage

```javascript
import { queryParam } from '@patomation/query-param'

const myParams = queryParam()
```

Example url might be:
```
https://mySite.com/?make=Tesla&model=T&year=2019electric=true
```

Result is one json object:

```javascript
//  myParams =
{
  make: 'Tesla',
  model: 'T',
  year: 2019,
  electric: true
}
```

### localStorage support
You can set a query param with this. It will be persisted in local storage.
So when you redirect and go to a different page the param will be present.

```javascript
import { localStorageQueryParam } from '@patomation/query-param'

const myParams = localStorageQueryParam()
```
Example:
1. navigate to page one with the param
```
https://mySite.com/pageOne/?cool=beans
```
```javascript
//  pageOne params =
{
  cool: 'beans'
}
```
2. navigate to page two without the query string. The param will still exist in local storage
```
https://mySite.com/pageTwo/
```
```javascript
//  pageTwo params =
{
  cool: 'beans'
}
```
The local storage key is 'persist:queryParam'

### Additional notes
- white spaces
```converts %20 to white space```
npm package: @patomation/react-ui-components
Description: A React js UI component library using material design principles. Includes all the building blocks to build a Gatsby website or a regular web app. Inline styles used but classes are available to override things. A config file exists for customizing glo
Author: Patrick Kelly
Latest version: 1.7.5
Deprecated: WARNING: This project has been renamed to @patomation/ui


# React Ui Components

A React js UI component library using material design principles.
Includes all the building blocks to build a Gatsby website or a regular web app.
Inline styles used but classes are available to override things.
A config file exists for customizing global sizes and colors.
Tested and linted JavaScript goodness.

## Installation
```
yarn add @patomation/react-ui-components
```
or
```
npm install @patomation/react-ui-components --save
```

## Usage

```javascript
import { Hero, Button, Icon, Footer } from '@patomation/react-ui-components'

const myComponent = () => {
  <div>
    <Hero
      image='/images/hero_image.jpg'
      title='My Cool Site'
      description='well met'>

    <Button title='cool beans' />

    <Icon name='star' /> {/* Supports svg material icons no font required */}

    <Footer>Footer Stuff</Footer>
  </div>
}

export default MyComponent

```


## Components
 - [Badge](src/Badge/doc.md)
 - [Brand](src/Brand/doc.md)
 - [Breakpoints](src/Breakpoints/doc.md)
 - [Button](src/Button/doc.md)
 - [Calendar](src/Calendar/doc.md)
 - [Card](src/Card/doc.md)
 - [Carousel](src/Carousel/doc.md)
 - [Center](src/Center/doc.md)
 - [Clickable](src/Clickable/doc.md)
 - [Code](src/Code/doc.md)
 - [Collapse](src/Collapse/doc.md)
 - [config.js](src/config.js/doc.md)
 - [Content](src/Content/doc.md)
 - [DragDrop](src/DragDrop/doc.md)
 - [Error](src/Error/doc.md)
 - [Footer](src/Footer/doc.md)
 - [Form](src/Form/doc.md)
 - [Grid](src/Grid/doc.md)
 - [Gutter](src/Gutter/doc.md)
 - [Header](src/Header/doc.md)
 - [Heading](src/Heading/doc.md)
 - [Hero](src/Hero/doc.md)
 - [Hr](src/Hr/doc.md)
 - [Icon](src/Icon/doc.md)
 - [IconButton](src/IconButton/doc.md)
 - [Image](src/Image/doc.md)
 - [ImageGrid](src/ImageGrid/doc.md)
 - [index.js](src/index.js/doc.md)
 - [Input](src/Input/doc.md)
 - [Link](src/Link/doc.md)
 - [List](src/List/doc.md)
 - [Loader](src/Loader/doc.md)
 - [LoginForm](src/LoginForm/doc.md)
 - [Modal](src/Modal/doc.md)
 - [Nav](src/Nav/doc.md)
 - [Panel](src/Panel/doc.md)
 - [RegisterForm](src/RegisterForm/doc.md)
 - [Row](src/Row/doc.md)
 - [ScrollButton](src/ScrollButton/doc.md)
 - [Section](src/Section/doc.md)
 - [Select](src/Select/doc.md)
 - [Shape](src/Shape/doc.md)
 - [SideBar](src/SideBar/doc.md)
 - [Spinner](src/Spinner/doc.md)
 - [Tabs](src/Tabs/doc.md)
 - [User](src/User/doc.md)
npm package: @patomation/ui
Description: A React js UI component library using material design principles. Includes all the building blocks to build a Gatsby website or a regular web app. Inline styles used but classes are available to override things. A config file exists for customizing global
Author: Patrick Kelly
Latest version: 2.2.0


# React Ui Components

A React js UI component library using material design principles.
Includes all the building blocks to build a Gatsby website or a regular web app.
Inline styles used but classes are available to override things.
A config file exists for customizing global sizes and colors.
Tested and linted JavaScript goodness.

## Installation
```
yarn add @patomation/ui
```
or
```
npm install @patomation/ui --save
```

## Basic Usage

```javascript
import { Hero, Button, Icon, Footer } from '@patomation/react-ui-components'

const myComponent = () => {
  <div>
    <Hero
      image='/images/hero_image.jpg'
      title='My Cool Site'
      description='well met'>

    <Button title='cool beans' />

    <Icon name='star' /> {/* Supports svg material icons no font required */}

    <Footer>Footer Stuff</Footer>
  </div>
}

export default MyComponent

```

# [Full Documentation](https://ui.patomation.com)

# Troubleshooting

Error: ENOSPC: System limit for number of file watchers reached, watch
fix: ```echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p```
https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details
npm package: @patomation/useglobal
Description: TypeScript NPM Package Starter
Author: Patrick Kelly
Latest version: 1.0.0

# useGlobal

A react hook for global local state

features:

- multiple listener system
- undo/redo
- Generic Types support

## Installation

```
yarn add my-component
```

or

```
npm install my-component --save
```

## Usage

```javascript
import { useGlobal } from '@patomation/useglobal'

const Component = (): React.ReactElement => {
  const [state, setState] = useGlobal({ color: 'red' })

  const { color } = state

  return (
    <div style={{
      color: color as string
    }}>

      {`My Color is ${color}`}

      <button onClick={(): void => {
        setState({ color: 'blue' })
      }}>
        {'Change Color'}
      </button>

    </div>
  )
}
```

## Know issues

### Jest testing

If you are testing with jest you will need to mock `localStorage`.
I used `jest-localstorage-mock` and include it in my jest setup files config. See `jest.config.js`.

#### `jest.config.js` Example

```javascript
module.exports = {
  ...
  setupFiles: [
    'jest-localstorage-mock'
  ]
}

```
npm package: @patomation/usehotkey
Description: TypeScript NPM Package Starter
Author: Patrick Kelly
Latest version: 0.0.1

# useHotkey

## Installation

```
npm i @patomation/usehotkey
```

## Usage

```javascript
import { useHotkey } from "@patomation/usehotkey";

const Component = (): React.ReactElement => {
  useHotkey("f", () => {
    // do something
  });
  ...
};
```
npm package: @patosala/photobook
Description: A react native component to reduce image requests by caching and later loading them from there.
Author: Pato Sala
Latest version: 1.0.6

# Photobook

A react-native component to save and load images from cache.

## Quick Links

- [GitHub](https://github.com/PatoSala/rn-image-cache)
- [npm](https://www.npmjs.com/package/@patosala/rn-image-cache)

## Installation

```bash
npm install rn-image-cache
```

## Usage

```jsx
import { View, StyleSheet } from 'react-native';
import { CachedImage } from '@patosala/rn-image-cache';

export default function App() {
	const url = 'https://example/image.jpg';

	return (
		<View style={styles.container}>
			<CachedImage 
				source={{ uri: url }}
				style={styles.picture}
			/>
		</View>
	)
}

const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	picture: {
		width: '100%',
		aspectRatio: '1/1'
	}
})
```

## Features

| Feature | Status |
| --- | --- |
| Save pictures to cache | ✅ |
| Clear old pictures from cache | ❌ (In progress) |
| Custom loading component | ❌ (In progress) |
| Event handler when image has been loaded (for dev purposes such as confirming if image has been loaded from cache or from a remote source) | ❌ (In Progress) |

If you think some features are missing, make an issue and let me know!
npm package: @patosala/rn-image-cache
Description: A react native component to reduce image requests by caching and later loading them from there.
Author: Pato Sala
Latest version: 1.0.4

# React Native CachedImage

A react-native component to save and load images from cache.

## Quick Links

- [GitHub](https://github.com/PatoSala/rn-image-cache)
- [npm](https://www.npmjs.com/package/@patosala/rn-image-cache)

## Installation

```bash
npm install rn-image-cache
```

## Usage

```jsx
import { View, StyleSheet } from 'react-native';
import { CachedImage } from '@patosala/rn-image-cache';

export default function App() {
	const url = 'https://example/image.jpg';

	return (
		<View style={styles.container}>
			<CachedImage 
				source={{ uri: url }}
				style={styles.picture}
			/>
		</View>
	)
}

const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	picture: {
		width: '100%',
		aspectRatio: '1/1'
	}
})
```

## Features

| Feature | Status |
| --- | --- |
| Save pictures to cache | ✅ |
| Clear old pictures from cache | ❌ (In progress) |
| Custom loading component | ❌ (In progress) |
| Event handler when image has been loaded (for dev purposes such as confirming if image has been loaded from cache or from a remote source) | ❌ (In Progress) |

If you think some features are missing, make an issue and let me know!