Getting Started with Adobe’s React Spectrum

npm install @adobe/react-spectrum
import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';function App() {
return (
<Provider theme={defaultTheme}>
<Button variant="cta">Hello React Spectrum!</Button>
</Provider>

);
}
import {Flex} from '@adobe/react-spectrum'// the component<Flex direction="column" width="size-2000" gap="size-100">
<View backgroundColor="celery-600" height="size-800" />
<View backgroundColor="blue-600" height="size-800" />
<View backgroundColor="magenta-600" height="size-800" />
</Flex>
React Spectrum Flex component
import {Grid} from '@adobe/react-spectrum'// the component
<Grid
areas={['header header', 'sidebar content', 'footer footer']}
columns={['1fr', '3fr']}
rows={['size-1000', 'auto', 'size-1000']}
height="size-6000"
gap="size-100">
<View backgroundColor="celery-600" gridArea="header" />
<View backgroundColor="blue-600" gridArea="sidebar" />
<View backgroundColor="purple-600" gridArea="content" />
<View backgroundColor="magenta-600" gridArea="footer" />
</Grid>
React Spectrum Grid component
function Button(props) {
let ref = useRef();
let {buttonProps} = useButton(props, ref);
let {children} = props;
return (
<button {...buttonProps} ref={ref}>
{children}
</button>
);
}
<Button onPress={() => alert('Button pressed!')}>Test</Button>
// style.button {
-webkit-appearance: none;
appearance: none;
background: green;
border: none;
color: white;
font-size: 14px;
padding: 4px 8px;
}
.button.focus-ring {
outline: 2px solid dodgerblue;
outline-offset: 2px;
}
// component<FocusRing focusRingClass="focus-ring">
<button className="button">Test</button>
</FocusRing>
function Example() {
let {isFocusVisible, focusProps} = useFocusRing();
return (
<button
{...focusProps}
style={{
WebkitAppearance: 'none',
appearance: 'none',
background: 'green',
border: 'none',
color: 'white',
fontSize: 14,
padding: '4px 8px',
outline: isFocusVisible ? '2px solid dodgerblue' : 'none',
outlineOffset: 2
}}>
Test
</button>
);
}
import {I18nProvider} from '@react-aria/i18n';<I18nProvider locale="fr-FR">
<YourApp />
</I18nProvider>
import {useRadioGroupState} from '@react-stately/radio';function RadioGroup(props) {
let state = useRadioGroupState(props);
return (
<>
<label>
<input
type="radio"
name={state.name}
checked={state.selectedValue === 'dogs'}
onChange={() => state.setSelectedValue('dogs')}
/>
Dogs
</label>
<label>
<input
type="radio"
name={state.name}
checked={state.selectedValue === 'cats'}
onChange={() => state.setSelectedValue('cats')}
/>
Cats
</label>
</>
);
}
<RadioGroup
defaultValue="dogs"
onChange={(value) => alert(`Selected ${value}`)}
/>

Author: admin

Leave a Reply

Your email address will not be published.