https://github.com/ar-to/shufflejs-react
React component for ShuffleJs
https://github.com/ar-to/shufflejs-react
npm-package react shufflejs
Last synced: 17 days ago
JSON representation
React component for ShuffleJs
- Host: GitHub
- URL: https://github.com/ar-to/shufflejs-react
- Owner: ar-to
- License: mit
- Created: 2020-01-26T08:37:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-03T08:29:58.000Z (over 4 years ago)
- Last Synced: 2025-04-19T08:15:56.140Z (about 1 month ago)
- Topics: npm-package, react, shufflejs
- Language: JavaScript
- Homepage: https://ar-to.github.io/shufflejs-react/
- Size: 351 KB
- Stars: 1
- Watchers: 2
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ShuffleJS-React
[](https://travis-ci.org/ar-to/shufflejs-react)
[](https://david-dm.org/ar-to/shufflejs-react) [](https://david-dm.org/ar-to/shufflejs-react?type=dev)
[](https://opensource.org/licenses/MIT)
![node][node-url]
![GitHub package.json version][version-url]
![npm (prod) dependency version][react-url]
![npm (prod) dependency version][shufflejs-url]
![GitHub issues][issues-url]
![Website][website-url]
![GitHub last commit (branch)][master-commit-url]
# Getting Started ✨
In progress...but check [codesandbox](https://codesandbox.io/embed/react-testing-6m589?fontsize=14&hidenavigation=1&theme=dark) or [website](https://ar-to.github.io/shufflejs-react/) for demo.
```jsx
import { SortFilter } from "shufflejs-react";
import taxonomies from "./data/taxonomiesObject.json";
import records from "./data/basicRecords.json";
export default function App() {
const defaultSort = ""; // empty string defaults to show all
const itemSelector = "sortblock";
return (
);
}
```
Child elements can be anything that takes in array of records objects
```jsx
function Elements({ itemSelector }) {
return records.map(record => (
));
}
function Element(props) {
const { itemSelector, record } = props;
return (
);
}
```
Files for data
```json
// basicRecords.json
[
{
"id": 1,
"src": "https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=14d236624576109b51e85bd5d7ebfbfc",
"dataGroupArrayString": ["Cat","Cat Procedures","Cat Lift"]
},
{
"id": 2,
"src": "https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=7a7080fc0699869b1921cb1e7047c5b3",
"dataGroupArrayString": ["City"]
}
]
// taxonomiesObject.json
{
"Body Types": {
"people": {
"slug": "people"
},
"food": {
"slug": "food"
},
"cat": {
"slug": "cat"
},
"city": {
"slug": "city"
},
"nature": {
"slug": "nature"
},
"abstract": {
"slug": "abstract"
}
}
}
```
# Contributing
Read the [Contributing.md](https://github.com/ar-to/shufflejs-react/blob/master/.github/CONTRIBUTING.md) file for instructions on running locally and contributing.
# License
MIT © Aricode00
[node-url]: https://img.shields.io/node/v/shufflejs-react
[version-url]: https://img.shields.io/github/package-json/v/ar-to/shufflejs-react
[react-url]: https://img.shields.io/npm/dependency-version/shufflejs-react/react
[shufflejs-url]: https://img.shields.io/npm/dependency-version/shufflejs-react/shufflejs
[issues-url]: https://img.shields.io/github/issues/ar-to/shufflejs-react
[website-url]: https://img.shields.io/website?url=https%3A%2F%2Far-to.github.io%2Fshufflejs-react%2F
[master-commit-url]: https://img.shields.io/github/last-commit/ar-to/shufflejs-react/master?label=last%20commit%3Amaster