Shufflejs-react NPM

ShuffleJS-React

node GitHub package.json version npm (prod) dependency version GitHub issues Website GitHub last commit (branch)

Getting Started ✨

In progress...but check codesandbox or website for demo.

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 (
    <div className="App">
      <SortFilter
        defaultSort={defaultSort}
        taxonomies={taxonomies}
        itemSelector={itemSelector}
      >
        <Elements records={records} itemSelector={itemSelector} />
      </SortFilter>
    </div>
  );
}

Child elements can be anything that takes in array of records objects

function Elements({ itemSelector }) {
  return records.map(record => (
    <Element key={record.id} record={record} itemSelector={itemSelector} />
  ));
}

function Element(props) {
  const { itemSelector, record } = props;
  return (
    <div
      className={`col-md-6 ${itemSelector}`}
      data-groups={`${JSON.stringify(record.dataGroupArrayString)}`}
    >
      <div className="aspect aspect--4x3">
        <div className="aspect__inner">
          <img className="element__img" src={record.src} alt="" />
        </div>
      </div>
    </div>
  );
}

Files for data

// 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"
    }
  }
}