swc-react is a collection of React wrapper components for Spectrum Web Components (SWC), providing a framework-agnostic approach with web components at the core. When migrating from React Spectrum to swc-react, follow these guidelines to ensure a smooth transition.
@adobe/react-spectrum), while swc-react uses individual packages per component (@swc-react/button, @swc-react/textfield, etc.)
| | Token | Old Value | New Value | | |
| | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | |
| | `--spectrum-drop-shadow-color-rgb` | `0, 0, 0` | `(missing)` | | |
| | `--spectrum-drop-shadow-color-opacity` | `0.15` | `(missing)` |
| //html | |
| <svg height="20" width="20" className="blinking"> | |
| <circle cx="5" cy="5" r="5" fill="red" /> | |
| Sorry, your browser does not support inline SVG. | |
| </svg> | |
| // css |
| // To disable text selection on your webpage try this css | |
| body { | |
| -webkit-user-select: none; | |
| -moz-user-select: -moz-none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } |
| import React from 'react' | |
| import PropTypes from 'prop-types' | |
| class ErrorBoundary extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { hasError: false } | |
| } | |
| componentDidCatch(error, info) { |
| // | |
| const searchAction = (value) => dispatch => { | |
| dispatch({ | |
| type: SEARCH_TEXT, | |
| text: value | |
| }) | |
| } | |
| //Test |
| //example auth token | |
| const AuthToken = 'az=saasdnqwqnx71231n1alsk123-123123sx'; | |
| // creating the interceptor | |
| axios.interceptors.request.use( | |
| config => { | |
| config.headers.authorization = `Bearer ${AuthToken}`; | |
| return config |
| //defining graphql schema | |
| const { gql, ApolloServer } = require("apollo-server") ; | |
| const typeDefs = gql` | |
| type Query { | |
| greeting: String | |
| } | |
| `; |
| import React, { Component } from 'react'; | |
| import logo from './logo.svg'; | |
| import './App.css'; | |
| import { BrowserRouter as Router, Route, Link } from "react-router-dom"; | |
| class App extends Component { | |
| state = { | |
| modal: null | |
| } |