Docs Components Assistant

NumberRoll

React example follows below.
ts
import { NumberRoll } from "@grassroot/ui-react/assistant";
export default function NumberRollDemo() {
return <NumberRoll value={1284} />;
}
ts
<script setup lang="ts">
import { NumberRoll } from "@grassroot/ui-vue/assistant";
</script>
<template>
<NumberRoll :value="1284" />
</template>
ts
import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootNumberRoll } from "@grassroot/ui-angular/assistant";
@Component({
selector: "app-number-roll-demo",
standalone: true,
imports: [GrassrootNumberRoll],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<grassroot-number-roll [value]="value" />`,
})
export class NumberRollDemoComponent {
protected readonly value = 1284;
}
export default NumberRollDemoComponent;
ts
<script lang="ts">
import { NumberRoll } from "@grassroot/ui-svelte/assistant";
</script>
<NumberRoll value={1284} />
ts
/** @jsxImportSource solid-js */
import { NumberRoll } from "@grassroot/ui-solid/assistant";
export default function NumberRollDemo() {
return <NumberRoll value={1284} />;
}

Installation

API Reference

Import

import { NumberRoll } from "@grassroot/ui-react/assistant";

Props

Prop
Type
Default
Requirement
value
number
required
locale
string | undefined
optional
format
Intl.NumberFormatOptions | undefined
optional
Prop
value
Type
number
Default
Requirement
required
Prop
locale
Type
string | undefined
Default
Requirement
optional
Prop
format
Type
Intl.NumberFormatOptions | undefined
Default
Requirement
optional

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { NumberRoll } from "@grassroot/ui-vue/assistant";

Props

Prop
Type
Default
Requirement
value
number
required
locale
string
"en-GB"
optional
format
Intl.NumberFormatOptions
optional
Prop
value
Type
number
Default
Requirement
required
Prop
locale
Type
string
Default
"en-GB"
Requirement
optional
Prop
format
Type
Intl.NumberFormatOptions
Default
Requirement
optional

Import

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootNumberRoll } from "@grassroot/ui-angular/assistant";

Props

Prop
Type
Default
Requirement
value
number
required
locale
string
"en-GB"
optional
format
Intl.NumberFormatOptions
optional
Prop
value
Type
number
Default
Requirement
required
Prop
locale
Type
string
Default
"en-GB"
Requirement
optional
Prop
format
Type
Intl.NumberFormatOptions
Default
Requirement
optional

Import

import { NumberRoll } from "@grassroot/ui-svelte/assistant";

Props

Prop
Type
Default
Requirement
value
number
required
locale
string
"en-GB"
optional
format
Intl.NumberFormatOptions
optional
class
string
optional
style
string
optional
Prop
value
Type
number
Default
Requirement
required
Prop
locale
Type
string
Default
"en-GB"
Requirement
optional
Prop
format
Type
Intl.NumberFormatOptions
Default
Requirement
optional
Prop
class
Type
string
Default
Requirement
optional
Prop
style
Type
string
Default
Requirement
optional

Import

import { NumberRoll } from "@grassroot/ui-solid/assistant";

Props

Prop
Type
Default
Requirement
value
number
required
locale
string
optional
format
Intl.NumberFormatOptions
optional
Prop
value
Type
number
Default
Requirement
required
Prop
locale
Type
string
Default
Requirement
optional
Prop
format
Type
Intl.NumberFormatOptions
Default
Requirement
optional

Content regions

  • children

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.