Is there any way to set the zoom level for a storybook canvas in either argTypes or parameters?
You could try the workaround for this.
Just wrap your template in the <div> element and set zoom attribute on it.
const Template: Story<IComponentProps> = (args) => (
<div style={{ zoom: 0.3 }}>
<Component {...args} />
</div>
)
Related
I'm new to Tailwind, and I'm not sure if there's a way to solve this edge case. Here is the scenario:
We have different variants listed on the product page(for example different color tags). When you hover we are showing a faded border around the tag, and when you select the variant, the tag becomes active, and its border should get darker.
The problem:
Even when the user clicks on the tag to make it active, the user still sees hover still rather than the 'active' style.
These are the classes I'm using for now
<Tag
clssName={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700'}`}
...prop
/>
Now the question is if there's a way to override the hover styles on when the item is active. One way could be to remove the hover class when the item is active, but I was wording if there is a Tailwind way to fix it.
You can add different styles for active and non-active variants.
<Tag
clssName={`flex rounded border bg-white ${active && 'border-gray-700 hover:border-black'}`} ${!active && "border-gray-200 hover:border-gray-400"}
...prop
/>
Well you can use focus utility for this.
Below is the example you can see where button has different behaviour on hover and focus.
<script src="https://cdn.tailwindcss.com"></script>
<div class="p-10">
<button class="p-4 bg-pink-100 hover:bg-pink-300 focus:bg-red-500 focus:border-2 focus:border-red-700">Click </button>
</div>
You can achieve this with a ternary operator on className. By default we have border-gray-200 hover:border-gray-400 when state changes, we replace border-gray-700 instead of border-gray-200 hover:border-gray-400.
const App = () => {
const [active, setActive] = React.useState(false);
return (
<button onClick = {() => setActive(!active)}
className={`flex p-3 rounded border bg-white ${active ? 'border-gray-700' : 'border-gray-200 hover:border-gray-400'}`
}>
{active ? 'Active' : 'Inactive'}
</button>
);
};
const rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render( < App / > );
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<div id="root" class="p-10"></div>
This is a simplified React component that uses helmet to update the link css on runtime:
function App() {
const [brand, setBrand] = useState('nike')
return (
<div className="App">
<Helmet>
<link rel="stylesheet" href={getBrandStyle(brand)} />
</Helmet>
<div>other contents here</div>
<!-- omitted the button components that change the brand state by calling setBrand -->
</div>
);
}
I have recently just used react-helmet as a declarative way to change the head tag's child and with the code I wrote above, when switching the css there is momentary lag when the page has no css stylings and then 1 second later the updated css shows up.
Even during the initial load of the page, if I use queryParameters (code above doesn't show the query parameter approach) such as
https://localhost:3000?brandQueryParam=nike
there is 1 second wherein there is no css styling before the brand css shows up.
Can you please let me know what I am missing and how to resolve this?
This is the solution that I came up with, not sure if setTimeout is the best solution so if anyone else knows a better way, please share it.
const brands = {
nike: 'nike2022',
adidas: 'adidas2017',
fila: 'fila2020'
};
function App() {
const [brand, setBrand] = useState('nike')
const [isLoading, setIsLoading] = useState(false)
const changeBrandStyleOnClick = (brand) => {
setBrand(brand)
setIsLoading(true)
}
return (
<div className="App">
<Helmet>
<link rel="stylesheet"
onChangeClientState={(newState, addedTags, removedTags) => setTimeout(() => setIsLoading(false), 1500)}
href={getBrandStyle(brand)} />
</Helmet>
{isLoading && (
<Overlay>
<Spinner/>
</Overlay>
)}
{!isLoading && (
<>
{Object.keys(brands).filter(b => b !== brand).map(b =>
(<Button onClick={() => changeBrandStyleOnClick (b)} value={b}>
<Logo
alt="default alt name"
appearance="default"
name={b}
size="small"/>
</Button>))
}
<div>other contents here</div>
</>
)}
</div>
);
}
I have a component that is passed as a label prop. I need to add width: 100% for it because otherwise, I cannot use justify-content: space between for my div. Here is how it looks like in developer tools.
return (
<div className={classes.row}>
<Checkbox
value={deviceId}
className={classes.checkbox}
checked={Boolean(selected)}
onChange={handleToggle}
label={
<div>
<Tooltip title={t('integrations.deviceEUI')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{deviceEui}
</Typography>
</Tooltip>
<Tooltip title={t('integrations.deviceName')} placement={'top-start'}>
<Typography variant="body1" className={classes.item}>
{name || ''}
</Typography>
</Tooltip>
</div>
}
/>
</div>
);
};
I'm not sure I fully understand the issue, but if you want to simply add styles to a React component, you can simply do the following:
cont labelStyle = {
width: '100%'
};
Then inside your return statement, you could attach this labelStyle to the parent <div> like so:
<div style={labelStyle}>
//other components
</div>
If this isn't what you really mean, then please consider outlining the issue a little more clearly, thanks!
In React Native version of this problem, you can simply give the "style" prop to the component as:
const NewComponent = ({style}) => {}
and now you are able to reach to the "style" prop from another file.
Now, "style" prop is available to use in "NewComponent", write the following code:
<NewComponent style={{}}/>
I want to not need to import a child component.
and Manipulation within the parent
On ReactJS is like that
`export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route
{...rest}
component={props =>
isAuthenticated ? (
<div>
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
}
/>
);`
On vue i want do something like that
The child :
<template>
title
<test>//parent
<div>Content</div>//child
</test>
</template>
on Parent Test like that
<template lang="">
<div>
Hello
<component></component> //Content Child
</div>
</template>
how do i do, can someone help me?
I'm using a material UI library in a React project using react typescript. I want this button to have a picture as a background. However, the button does not accept src or imageURL and returns a typescript error and the css style background doesn't show the picture either. this is my code:
const noticon = require ('./../../images/nicon.png')
const Avatarpic = require ('./../../images/Avatar.png')
const ExampleButton = ({
// useOpenState hook handlers
handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
<Button onClick={handleToggle} style={{backgroundImage: '{noticon}'}} square>
</Button>
)
function Navbar () {
return (
<>
<TopBar style={{ backgroundColor: '#e6edec' }}>
<TopBarSection>
<TopBarTitle>
<Avatar imgUrl={Avatarpic} name='حسین ساداتی پور' style={{ fontFamily: 'IranSans', fontSize: '20px' }} />
</TopBarTitle>
<Dropdown ButtonComponent={ExampleButton}>
<DropdownItem>Item to click</DropdownItem>
</Dropdown>
</TopBarSection>
{// <TopBarSection>
// burger menu Icon
// </TopBarSection>
}
</TopBar>
<section
style={{
padding: 50,
textAlign: 'center'
}}
>
Some content
</section>
</>
)
}
export default Navbar
you need to do this instead:
<Button onClick={handleToggle} style={{backgroundImage: `url(${noticon})`}} square>