EasecraftImplemented

Component / Layout

Filter Grid

Filter keyed collections without tearing focus away. Target counts update immediately, excluded cards retain their exits, and the remaining grid flows into place.

Controlled / all
Component gallery / controlled filters
6 components / all
  • 01

    Motion

    Single-element presets

  • 02

    Presence

    Retained lifecycle

  • 03

    Animated Tabs

    Keyboard navigation

  • 04

    Motion Dialog

    Modal focus

  • 05

    Number Ticker

    Numeric feedback

  • 06

    Toast Stack

    Live notifications

Delivery contract

Install it

pnpm add easecraft@0.1.0

The component imports stable APIs from easecraft.

Files / 00

    Dependencies / 03

    easecraft
    npm / 0.1.0
    react
    peer / >=18.2.0 <20.0.0
    react-dom
    peer / >=18.2.0 <20.0.0

    Package usage

    Use it

    import { FilterGrid } from "easecraft";

<FilterGrid
  items={projects}
  filters={projectFilters}
  getKey={(project) => project.id}
  value={activeFilter}
  onValueChange={setActiveFilter}
>
  {(project) => <ProjectCard project={project} />}
</FilterGrid>

    Typed contract

    API

    PropTypeDefaultPurpose
    itemsreadonly Item[]requiredComplete controlled item data
    filtersreadonly FilterGridFilter[]requiredLabels, values, and predicates
    getKey(item) => React.KeyrequiredStable item identity
    children(item, state) => ReactNoderequiredGrid item renderer
    valuestringuncontrolledControlled active filter
    defaultValuestringfirst enabledInitial uncontrolled filter
    onValueChange(value) => voidnoneFilter selection callback
    resultLabel(count, filter) => ReactNodecount + result(s)Live result text
    emptyReactNodedefault messageZero-result content
    durationduration token | number"normal"Entry and reflow duration
    exitDurationduration token | number"fast"Filtered-item exit duration
    intervalstagger token | number"normal"Entry/exit sequence interval
    maxDelayduration token | number"slow"Maximum stagger span
    distancedistance token | number"medium"Entry and exit travel
    asHTML tag"div"Polymorphic host element

    Release requirement

    Accessibility

    Keyboard controls
    Every filter is a native pressed button with a visible focus indicator.
    Focus stability
    Filtering a focused card moves focus to its nearest remaining neighbor.
    Result announcements
    The target count is announced once, independent from animation frames.
    Reduced motion
    Filtering and layout changes settle immediately while semantics stay intact.