3 ms·
That's awesome, I love tachyons! styled-components is on a slightly "lower" level in a certain sense, you would build components like yours with styled-compone
by mxstbr 10y ago
That's awesome, I love tachyons!
styled-components is on a slightly "lower" level in a certain sense, you would build components like yours with styled-components:
const TachyonsText = styled.Text`
${props => props.bt ? 'some: styles;' : 'other: styles;'}
`;
Those functions could then be extracted and reused across your components:
const bt = (props) => props.bt ? 'some: styles;' : 'other: styles;';
const TachyonsText = styled.Text`
${bt} ${bb} ${jcfs}
`;
And then you can use your component like any other tachyons component:
<TachyonsText bt bb>Text here</TachyonsText>
- mxstbr 10y agoTo elaborate on this just a tiny bit, you can use tachyons-js[0] by the amazing jongold to automate even more of this: import tachyons from 'tachyons-js'; const tachyonsHelperFunc(props) => Object.keys(props).map(prop => tachyons[prop]) const MyTachyonsComp = styled.div`${tachyonsHelperFunc}`; This way, MyTachyonsComp can now has all the benefits of styled-components (easy theming and overriding, power of JS for styling, ReactNative, nesting,…) while also being able to use tachyons really easily: <MyTachyonsComp ma2 ph2 bb /> In fact, you could probably even wrap the above helper to make it really easy to use: const styledTachyonsComponent = (...args) = styled(..args)`${tachyonsHelperFunction}`; Now you can created styled-tachyons-components really easily: const MyTachyonsStyledDiv = styledTachyonsComponent('div'); :tada: Note: I just coded this in this comment, might be some typos in there. [0]: https://github.com/jongold/tachyons-js https://github.com/jongold/tachyons-js