react-native-katext
v0.4.6
Published
Show KaTeX in React Native using WebView with auto height
Downloads
9
Readme
React Native
react-native-webview bundled with KaTeX
Example
Usage
import { StyleSheet } from 'react-native';
import Katex from 'react-native-katext';
const styles = StyleSheet.create({
katex: {
flex: 0,
overflow: 'visible',
},
katexContainer: {
flex: 0,
overflow: 'visible',
},
});
const inlineStyle = `
html, body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.katex {
font-size: 24px;
margin: 0;
padding: 8px;
display: flex;
overflow: auto;
}
`;
export default function App() {
const [loaded, setLoaded] = useState(false);
const [expression, setExpression] = useState('c=\\pm\\sqrt{a^2 + b^2}');
return (
<Katex
expression={message}
style={styles.katex}
containerStyle={styles.katexContainer}
inlineStyle={inlineStyle}
displayMode={false}
throwOnError={false}
errorColor="#f00"
macros={{}}
colorIsTextColor={false}
onLoad={() => console.log('loaded')}
onError={() => console.error('Error')}
/>
);
}
License
License The MIT License Copyright (c) 2017-2020 Ivan Zakharchanka