https://github.com/cawfree/react-native-picture-puzzle

⚛️ 🧩 A picture puzzle component.
https://github.com/cawfree/react-native-picture-puzzle

game picture puzzle react-native

Last synced: 3 months ago
JSON representation

⚛️ 🧩 A picture puzzle component.

• Host: GitHub
• URL: https://github.com/cawfree/react-native-picture-puzzle
• Owner: cawfree
• License: mit
• Created: 2021-01-14T23:02:07.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-11T20:23:39.000Z (over 1 year ago)
• Last Synced: 2024-10-04T09:51:23.733Z (4 months ago)
• Topics: game, picture, puzzle, react-native
• Language: TypeScript
• Homepage: https://twitter.com/cawfree
• Size: 821 KB
• Stars: 42
• Watchers: 2
• Forks: 16
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-picture-puzzle

⚛️ 🧩  A picture puzzle component. Supports [**Android**](https://reactnative.dev), [**iOS**](https://reactnative.dev) and the [**Web**](https://github.com/necolas/react-native-web).

[🎬 **demo**](https://twitter.com/cawfree/status/1350268277143068673)



  



## 🚀 getting started

Using [**Yarn**](https://yarnpkg.com):

```sh

yarn add react-native-picture-puzzle

```

## ✍️ usage

```typescript

import React from 'react';

import { PicturePuzzle, PuzzlePieces } from 'react-native-picture-puzzle';

export default function App() {

  const [hidden, setHidden] = React.useState(0); // piece to obscure

  const [pieces, setPieces] = React.useState([0, 1, 2, 3, 4, 5, 6, 7, 8]);

  const source = React.useMemo(() => ({

    uri: 'https://pbs.twimg.com/profile_images/1180062941162479616/W8XdhKTG_400x400.jpg',

  }), []);

  const renderLoading = React.useCallback((): JSX.Element => , []);

  const onChange = React.useCallback((nextPieces: PuzzlePieces, nextHidden: number | null): void => {

    setPieces(nextPieces);

    setHidden(nextHidden);

  }, [setPieces, setHidden]);

  return (

    

  );

}

```

## 🦄 types

```typescript

export type PuzzlePiece = number;

export type PuzzlePieces = readonly PuzzlePiece[];

export enum MoveDirection {

  BOTTOM = 'bottom',

  LEFT = 'left',

  RIGHT = 'right',

  TOP = 'top',

}

export type PicturePuzzleProps = ImageProps & {

  readonly hidden: number | null;

  readonly size: number;

  readonly pieces: PuzzlePieces;

  readonly source: ImageURISource | number;

  readonly renderLoading?: () => JSX.Element;

  readonly onChange?: (nextPieces: PuzzlePieces, nextHidden: number | null) => void;

};

```

## ✌️ license

[**MIT**](./LICENSE)